import React from 'react'
import ReactDOM from 'react-dom'
import _ from 'lodash'
import moment from 'moment'
import numeral from 'numeral'
import {Link} from 'react-router'

class Format extends React.Component {

  render() {
    let Content = Default
    if(_.isFunction(this.props.format)) {
      Content = this.props.format
    } else if(this.props.format == 'status') {
      Content = Status
    } else if(this.props.format == 'price') {
      Content = Price
    } else if(this.props.format == 'date') {
      Content = Date
    } else if(this.props.format == 'datetime') {
      Content = DateTime
    } else if(this.props.format == 'check_times') {
      Content = CheckTimes
    } else if(this.props.format == 'check') {
      Content = Check
    } else if(this.props.format == 'capitalize') {
      Content = Capitalize
    } else if(this.props.format == 'email') {
      Content = Email
    } else if(this.props.format == 'raw') {
      Content = Raw
    } else if(this.props.value === '') {
      Content = Empty
    }
    return <Content {...this.props} />
  }

}

var Default = (props) => {
  return <span>{props.value}</span>
}

var Raw = (props) => {
  return <span dangerouslySetInnerHTML={{__html: props.value}}></span>
}

var Empty = (props) => {
  return <span dangerouslySetInnerHTML={{__html: '&nbsp;'}}></span>
}

var Status = (props) => {
  return <span className={props.value.toLowerCase()}>{props.value.toUpperCase()}</span>
}

var CheckTimes = (props) => {
  return ((props.value !== false && !_.isNull(props.value)) || props.value === true) ? <i className="icon green check" /> : <i className="icon red times" />
}

var Check = (props) => {
  return ((props.value !== false && !_.isNull(props.value)) || props.value === true) ? <i className="icon green check" /> : <span />
}

var Price = (props) => {
  return <span>{numeral(props.value).format('$0,0.00')}</span>
}

var Date = (props) => {
  return <span>{(props.value) ? moment(props.value).format('MM/DD/YY') : ''}</span>
}

var DateTime = (props) => {
  return <span>{(props.value) ? moment(props.value).format('MM/DD/YY @ hh:mm A') : ''}</span>
}

var Capitalize = (props) => {
  return <span>{props.value.toUpperCase()}</span>
}

var Email = (props) => {
  return <Link to={`mailto:${props.value}`}>{props.value}</Link>
}

export default Format

@@ -1363,24 +1363,40 @@
 %3E %7B%0A  return
+ (props.value) ?
  %3Cspan class
@@ -1454,32 +1454,43 @@
 erCase()%7D%3C/span%3E
+ : %3Cspan /%3E
 %0A%7D%0A%0Avar CheckTim

add a check for status