import { Button, Icon } from 'semantic-ui-react'
import DateTimePicker from '../DateTimePicker/DateTimePicker.coffee'
import Input from '../Input/Input.coffee'

export default observer class DateTimeInput extends Component
  # props
  # onChange: Func
  # value: String
  # inputProps: Object

  constructor: (props) ->
    super props

    @state = observable
      isDateTimePickerVisible: false
      values: [moment().hour(0).minute(0), moment().hour(0).minute(0)]
      dateRange: props.value

    reaction(
      =>
        @state.dateRange
    ,
      (dateRange) =>
        props.onChange dateRange
    )

    reaction(
      =>
        @state.dateRange
      ,
      (dateRange) =>
        if dateRange is ''
          @state.values = [moment().hour(0).minute(0), moment().hour(0).minute(0)]

        else if /(.*) ~ (.*)/.test dateRange
          exec = /(.*) ~ (.*)/.exec dateRange

          if moment(exec[1])._isValid and moment(exec[2])._isValid and dateRange.length is 35
            @state.values = [moment(exec[1]), moment(exec[2])]
    )

  @defaultProps:
    inputProps: {}

  componentDidUpdate: =>
    @state.dateRange = @props.value

  onClickConfirm: =>
    @state.dateRange = "#{@state.values[0].format('YYYY-MM-DD HH:mm')} ~ #{@state.values[1].format('YYYY-MM-DD HH:mm')}"

    @state.isDateTimePickerVisible = false

  onClickClose: =>
    @state.isDateTimePickerVisible = false

  onFocusDateRange: =>
    @state.isDateTimePickerVisible = true

  onChangeDateTimePicker: (values) =>
    @state.values = values

  onChangeDateRange: (event, data) =>
    @state.dateRange = data.value

  onClickSettingDateRange: (event, data) =>
    @state.values = [moment().hour(0).minute(0).subtract(data.amount, data.unit), moment().hour(0).minute(0)]

  renderSettingDateRangeButtons: =>
    dateRanges = [
      name: '오늘'
      unit: 'day'
      amount: 0
    ,
      name: '1주'
      unit: 'week'
      amount: 1
    ,
      name: '2주'
      unit: 'week'
      amount: 2
    ,
      name: '1개월'
      unit: 'month'
      amount: 1
    ,
      name: '6개월'
      unit: 'month'
      amount: 6
    ,
      name: '1년'
      unit: 'year'
      amount: 1
    ]

    dateRanges.map (dateRange) =>
      <Button size="mini" onClick={@onClickSettingDateRange} {...dateRange}>{ dateRange.name }</Button>

  render: =>
    <div>
      <Input isHeaderVisible={false} isResetVisible resetButtonSize="small" size="mini" onFocus={this.onFocusDateRange} onChange={@onChangeDateRange} value={this.state.dateRange} {...@props.inputProps} />
      <div style={{ position: 'absolute', backgroundColor: '#fafafa', padding: 16, width: 556, visibility: if @state.isDateTimePickerVisible then 'visible' else 'hidden' }}>
        <div style={{ display: 'flex' }}>
          <div style={{ flexBasis: 50 }} />
          <div style={{ flex: 1, display: 'flex', justifyContent: 'center' }}>
            { @renderSettingDateRangeButtons() }
          </div>
          <div style={{ flexBasis: 50, display: 'flex', justifyContent: 'flex-end' }}>
            <Icon name="close" size="large" style={{ cursor: 'pointer' }} onClick={@onClickClose} />
          </div>
        </div>
        <DateTimePicker values={this.state.values} onChange={this.onChangeDateTimePicker} />
        <div style={{ display: 'flex', justifyContent: 'center', marginTop: 5 }}>
          <Button onClick={@onClickConfirm} style={{ marginLeft: 10 }}>확인</Button>
        </div>
      </div>
    </div>