import { Button } from 'semantic-ui-react'
import DatePicker from '../DatePicker/DatePicker.coffee'
import TimePicker from '../TimePicker/TimePicker.coffee'

export default observer class DateTimePicker extends Component
  constructor: (props) ->
    super props

    @state = observable
      startAt: moment().hour(0).minute(0)
      endAt: moment().hour(0).minute(0)

  @propTypes:
    values: PropTypes.array
    onChange: PropTypes.func

  @defaultProps:
    values: [moment().hour(0).minute(0), moment().hour(0).minute(0)]
    onChange: =>

  componentDidMount: =>
    @state.startAt = @props.values[0]

    @state.endAt = @props.values[1]

  componentWillReceiveProps: (nextProps) =>
    @state.startAt = nextProps.values[0]

    @state.endAt = nextProps.values[1]

  onChageDatePicker: (date, name) =>
    @state[name] = moment(@state[name]).year(moment(date).year()).month(moment(date).month()).date(moment(date).date())

    @props.onChange [toJS(@state.startAt), toJS(@state.endAt)]

  onChangeTimePicker: (date, name) =>
    @state[name] = moment(@state[name]).hour(moment(date).hour()).minute(moment(date).minute())

    @props.onChange [toJS(@state.startAt), toJS(@state.endAt)]

  render: =>
    startAt = toJS @state.startAt

    endAt = toJS @state.endAt

    <div style={{ width: 524 }}>
      <div style={{ display: 'flex', marginTop: 10 }}>
        <div style={{ flex: 1 }}>
          <div style={{ fontSize: 18, fontWeight: 'bold', textAlign: 'center' }}>{ moment(startAt).format('YYYY-MM-DD') }&nbsp;&nbsp;&nbsp;{ moment(startAt).format('HH:mm') } <span style={{ fontSize: 14, fontWeight: 'normal' }}>부터</span></div>
          <DatePicker
            marginTop={10}
            value={startAt}
            onChange={@onChageDatePicker}
            name="startAt"
          />
        </div>
        <div style={{ flexBasis: 10 }} />
        <div style={{ flex: 1 }}>
          <div style={{ fontSize: 18, fontWeight: 'bold', textAlign: 'center' }}>{ moment(endAt).format('YYYY-MM-DD') }&nbsp;&nbsp;&nbsp;{ moment(endAt).format('HH:mm') } <span style={{ fontSize: 14, fontWeight: 'normal' }}>까지</span></div>
          <DatePicker
            marginTop={10}
            value={endAt}
            onChange={@onChageDatePicker}
            name="endAt"
          />
        </div>
      </div>
      <div style={{ display: 'flex', marginTop: 5 }}>
        <div style={{ display: 'flex', flex: 1, justifyContent: 'center' }}>
          <TimePicker onChange={@onChangeTimePicker} name="startAt" value={toJS @state.startAt} />
        </div>
        <div style={{ flexBasis: 10 }} />
        <div style={{ display: 'flex', flex: 1, justifyContent: 'center' }}>
          <TimePicker onChange={@onChangeTimePicker} name="endAt" value={toJS @state.endAt} />
        </div>
      </div>
    </div>