React = require 'react'
PropTypes = require 'prop-types'
createClass = require 'create-react-class'
_ = require 'lodash'
moment = require 'moment'
DatePicker = React.createFactory(require '../date_picker')
SelectInput2 = React.createFactory(require '../select_input_2')

{div, label, span} = React.DOM

###&
@general - 
  This component passes all props forward to datepicker, see datepicker component for it's props.

@props.formLabel - OPTIONAL - [string]
  The value of the label that will display to the left of the input

@props.className - OPTIONAL - [string] - default 'grid grid-pad'
  optional class to be added the main div

@props.labelColumnClass - OPTIONAL - [string]
  optional class that will be added to the label column

@props.inputColumnClass - OPTIONAL - [string]
  optional class that will be added to the input column

@props.isFieldRequired - OPTIONAL - [boolean]
  optional boolean that will display the red asterisk if true

@props.fullRow - OPTIONAL - [boolean]
  optional boolean that will determine whether to display the input in a full row with or without a label

@props.enableTime - OPTIONAL - [boolean]
  includes the time picker

@props.children - OPTIONAL - [array]
  optional array of children 
&###

GridFormDatePicker = createClass
  
  displayName: 'GridFormDatePicker'

  propTypes:
    formLabel: PropTypes.string
    className: PropTypes.string
    labelColumnClass: PropTypes.string
    inputColumnClass: PropTypes.string
    isFieldRequired: PropTypes.bool
    fullRow: PropTypes.bool
    enableTime: PropTypes.bool
    twentyFourHour: PropTypes.bool
    selected: PropTypes.object
    minutes: PropTypes.array
    AmPm: PropTypes.array
    isInPopover: PropTypes.bool
    disabled: PropTypes.bool
    onChange: PropTypes.func
    timeColumns: PropTypes.number
    returnDateString: PropTypes.string

  getDefaultProps: ->
    labelColumnClass: 'col-3-12'
    inputColumnClass: 'col-9-12' 
    className: 'grid grid-pad'
    isFieldRequired: no
    fullRow: yes
    enableTime: no
    twentyFourHour: no
    minutes: [0,15,30,45]
    AmPm: ['am', 'pm']
    isInPopover: no
    disabled: no
    timeColumns: 2

  
  render: ->
    {formLabel, className, labelColumnClass, inputColumnClass, inputTextClass, isFieldRequired, selected,
    fullRow, enableTime, twentyFourHour, tabId, children, isInPopover, tabIndex, disabled, onChange} = @props

    if formLabel?
      labelClass = 'form-label'
      if isFieldRequired then labelClass += ' is-required'

      labelField = div {
        key: 'label'
        className: labelColumnClass
      }, label {className: labelClass}, formLabel

    # we do not want to pass the className down as it will mess up the styles
    inputProps = _.omit(_.assign({}, @props, {ref: 'input'}), ['className'])

    input = DatePicker inputProps

    if enableTime
      classes = @getCellClasses(inputColumnClass)
      {hour, minute, ampm} = @parseTime(selected)

      inputCell = [
        div {
          key: 'picker'
          className: classes[0]
        }, input
        div {
          key: 'time1'
          className: classes[1]
        }, [
          SelectInput2 {
            ref: 'hour'
            key: 'hour'
            tabId: tabId
            wrapperClass: 'hour'
            value: hour or ''
            options: do @getHourOptions
            onChange: onChange
            disabled: disabled
            isInPopover: isInPopover
            tabIndex: tabIndex
          }
          span {
            key: 'divide'
            className: 'time-divide'
          }, ':'
          SelectInput2 {
            ref: 'minute'
            key: 'minute'
            wrapperClass: 'minutes'
            tabId: tabId
            value: minute or ''
            options: do @getMinuteOptions
            onChange: onChange
            disabled: disabled
            isInPopover: isInPopover
            tabIndex: tabIndex
          }
          SelectInput2 {
            ref: 'ampm'
            key: 'ampm'
            wrapperClass: 'ampm'
            tabId: tabId
            value: ampm or ''
            options: do @getAmPmOptions
            onChange: onChange
            disabled: disabled
            isInPopover: isInPopover
            tabIndex: tabIndex
          } unless twentyFourHour
        ]
      ]


    else
      inputCell = div {
        key: 'input'
        className: inputColumnClass
      }, input

    # This is a full row of a form with a label
    if fullRow and formLabel?
      content = [
        labelField
        inputCell
      ].concat children

      div {
        className: className
      }, content
    # This is a full row w/ out a label
    else if fullRow
      content = [
        inputCell
      ].concat children

      div {
        className: className
      }, content
    # This is a single cell within a row
    else
      inputCell

  getValue: -> 
    {enableTime, returnDateString, twentyFourHour} = @props
    timestamp = @refs.input.getValue()

    return timestamp unless enableTime

    minute = @refs.minute.getValue()
    hour = @refs.hour.getValue()
    ampm = @refs.ampm?.getValue() or ''

    # When returnDateString is passed the datepicker will return a string instead of a moment object
    # in this case momentize it before extracting the time
    if returnDateString?
      date = moment(timestamp, returnDateString).format('YYYYMMDD')
      rv = moment("#{date}#{hour}#{minute}#{ampm}", if twentyFourHour then 'YYYYMMDDHHmm' else 'YYYYMMDDhmma')
      rv.format(returnDateString)
    else
      date = timestamp.format('YYYYMMDD')
      moment("#{date}#{hour}#{minute}#{ampm}", if twentyFourHour then 'YYYYMMDDHHmm' else 'YYYYMMDDhmma')
     
      

  parseTime: (timestamp) ->
    return {} unless timestamp?
    
    {twentyFourHour, returnDateString} = @props

    # When returnDateString is passed the datepicker will return a string instead of a moment object
    # in this case momentize it before extracting the time
    timestamp = if returnDateString? then moment(timestamp, returnDateString) else timestamp
    
    {
      hour: timestamp.format(if twentyFourHour then 'HH' else 'h')
      minute: timestamp.format('mm')
      ampm: timestamp.format('a')
    }


  getHourOptions: ->
    {twentyFourHour} = @props
    
    if not twentyFourHour
      hourOptions = [{
        label: '12'
        value: '12'
      }]

      hourOptions.push(
        label: hour
        value: hour
      ) for hour in [1..11]
        
      hourOptions

    else
      {
        label: if hour < 10 then "0#{hour}" else hour
        value: if hour < 10 then "0#{hour}" else hour
      } for hour in [0..23]


  getMinuteOptions: ->
    {minutes} = @props
    {
      label: if minute < 10 then "0#{minute}" else minute
      value: if minute < 10 then "0#{minute}" else minute
    } for minute in minutes


  getAmPmOptions: ->
    {AmPm} = @props 
    {
      label: opt
      value: opt
    } for opt in AmPm


  getCellClasses: (inputColumnClass) -> 
    {timeColumns} = @props 
    classSplit = inputColumnClass.split('-')
    dateCol = classSplit[1]
    colCount = classSplit[2]

    [
      "col-#{dateCol - timeColumns}-#{colCount}"
      "col-#{timeColumns}-#{colCount}"
    ]  



module.exports = GridFormDatePicker