import { Icon } from 'semantic-ui-react'

import './DatePicker.less'

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

    @state = observable
      name: props.name

  @propTypes:
    name: PropTypes.string
    onChange: PropTypes.func
    value: PropTypes.object
    marginTop: PropTypes.number
    marginLeft: PropTypes.number

  @defaultProps:
    name: uuid()
    onChange: =>
    value: moment()
    marginTop: 0
    marginLeft: 0

  componentDidMount: =>
    $(".slap-date-picker.#{@state.name} > .date-picker").datepicker
      dateFormat: 'yy-mm-dd'
      onSelect: (date) =>
        @props.onChange moment(date), @state.name
      defaultDate: moment(@props.value).toDate()
      monthNames: [
        '01.',
        '02.',
        '03.',
        '04.',
        '05.',
        '06.',
        '07.',
        '08.',
        '09.',
        '10.',
        '11.',
        '12.'
      ]
      dayNamesMin: [
        '일',
        '월',
        '화',
        '수',
        '목',
        '금',
        '토'
      ]

  componentDidUpdate: =>
    $(".slap-date-picker.#{@state.name} > .date-picker").datepicker 'setDate', moment(@props.value).toDate()

  onClickPrev: =>
    $(".slap-date-picker.#{@state.name} > .date-picker .ui-datepicker-prev").click()

  onClickNext: =>
    $(".slap-date-picker.#{@state.name} > .date-picker .ui-datepicker-next").click()

  render: =>
    <div className="slap-date-picker #{@state.name}" style={{ marginTop: @props.marginTop, marginLeft: @props.marginLeft }}>
      <div>
        <div onClick={@onClickPrev}>
          <Icon name="chevron left" style={{ color: '#ffffff', marginTop: -3, marginLeft: 2 }} />
        </div>
        <div />
        <div onClick={@onClickNext}>
          <Icon name="chevron right" style={{ color: '#ffffff', marginTop: -3, marginLeft: 2 }} />
        </div>
      </div>
      <div className="date-picker" />
    </div>