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

import './TimePicker.less'

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

    @state = observable
      hour: '00'
      minute: '00'

  @propTypes:
    name: PropTypes.string
    value: PropTypes.object
    onChange: PropTypes.func

  @defaultProps:
    name: uuid()
    value: moment().hour(0).minute(0)
    onChange: =>

  componentDidMount: () =>
    @state.hour = moment(@props.value).format('HH')

    @state.minute = moment(@props.value).format('mm')

  componentWillReceiveProps: (nextProps) =>
    @state.hour = moment(nextProps.value).format('HH')

    @state.minute = moment(nextProps.value).format('mm')

  makeTime: (type, value) =>
    if type is 'hour'
      if parseInt(value) < 0
        return '00'

      else if parseInt(value) > 23
        return '23'

      else
        return if parseInt(value).toString().length == 1 then "0#{parseInt(value).toString()}" else parseInt(value).toString()

    if type is 'minute'
      if parseInt(value) < 0
        return '00'

      else if parseInt(value) > 59
        return '59'

      else
        return if parseInt(value).toString().length == 1 then "0#{parseInt(value).toString()}" else parseInt(value).toString()

  onChangeInput: (event, data) =>
    if /[^0-9]/.test data.value or data.value is ''
      return

    value = @makeTime data.name, data.value

    @state[data.name] = value

    @props.onChange moment().hour(parseInt @state.hour).minute(parseInt @state.minute), @props.name

  onFocusInput: (event) =>
    @state[event.target.name] = ''

  onBlurInput: (event) =>
    if @state[event.target.name] is ''
      @state[event.target.name] = '00'

      @props.onChange moment().hour(parseInt @state.hour).minute(parseInt @state.minute), @props.name

  render: =>
    <div className="slap-time-picker">
      <Input size="tiny" style={{ width: 30 }} onBlur={@onBlurInput} onFocus={@onFocusInput} onChange={@onChangeInput} name="hour" value={@state.hour} />&nbsp;&nbsp;시&nbsp;&nbsp;&nbsp;&nbsp;
      <Input size="tiny" style={{ width: 30 }} onBlur={@onBlurInput} onFocus={@onFocusInput} onChange={@onChangeInput} name="minute" value={@state.minute} />&nbsp;&nbsp;분
    </div>