React = require 'react'
ReactDatepicker = React.createFactory(require 'react-datepicker')
moment = require 'moment'
_ = require 'lodash'

{div, span} = React.DOM


DatePicker = React.createClass

  displayName: 'DatePicker'

  propTypes:
    placeholderText: React.PropTypes.oneOfType [
      React.PropTypes.string
      React.PropTypes.number
    ]
    dateFormat: React.PropTypes.string
    className: React.PropTypes.string
    minDate: React.PropTypes.object
    maxDate: React.PropTypes.object
    onChange: React.PropTypes.func.isRequired
    tabIndex: React.PropTypes.number
    selected: React.PropTypes.oneOfType [
      React.PropTypes.string
      React.PropTypes.object
    ]

  getDefaultProps: ->
    placeholderText: 'Select a date'
    dateFormat: 'MM/DD/YYYY'
    className: null
    includeTime: no # yes to include time selection
    returnDateString: null # pass a date format string to get that format from the getValue method
    onChange: ->

  getInitialState: ->
    selected: @props.selected or moment()
    
  render: ->
    props = _.clone(@props)        
    props.onChange = @handleDateChange

    mainClass = 'datepicker-wrapper'
    mainClass += " #{className}" if className?

    div {
      className: mainClass
    },
      ReactDatepicker(props)

  handleDateChange: (date) ->
    @setState
      selected: date
    , =>
      @props.onChange?(date)

  getValue: ->
    {returnDateString} = @props
    {selected} = @state
    if returnDateString? and selected? then selected.format(returnDateString) else selected or moment()
    

module.exports = DatePicker