import { Button } from 'semantic-ui-react'
import NumberPicker from '../NumberPicker/NumberPicker.coffee'
import Input from '../Input/Input.coffee'

export default observer class NumberInput extends Component
  # props
  # onChange: Func
  # value: String

  constructor: (props) ->
    super props

    @state = observable
      values: ['', '']
      numberRange: ''
      isNumberPickerVisible: false

    reaction(
      =>
        @state.numberRange
    ,
      (numberRange) =>
        @state.values = ['', '']

        props.onChange numberRange
    )

  onChangeNumberRange: (event, data) =>
    @state.numberRange = data.value

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

  onClickConfirm: =>
    if not parseFloat(@state.values[0]) and not parseFloat(@state.values[1])
      @state.numberRange = ''

    else
      @state.numberRange = "#{parseFloat(@state.values[0]) or ''} ~ #{parseFloat(@state.values[1]) or ''}"

    @state.isNumberPickerVisible = false

  onClickCancel: =>
    if @state.numberRange is ''
      @state.values = ['', '']

    else
      exec = /(.*) ~ (.*)/.exec @state.numberRange

      @state.values = [exec[1], exec[2]]

    @state.isNumberPickerVisible = false

  onFocusNumberRange: =>
    @state.isNumberPickerVisible = true

    $('.slap-meteor-react-number-input input:nth-of-type(1)').blur()

  render: =>
    <div className="slap-meteor-react-number-input" style={{ position: 'relative', zIndex: 1 }}>
      <Input isResetVisible isHeaderVisible={false} size="mini" resetButtonSize="small" onFocus={@onFocusNumberRange} onChange={@onChangeNumberRange} value={@state.numberRange} {...@props.inputProps} />
      <div style={{ position: 'absolute', top: 0, backgroundColor: '#fafafa', padding: 16, width: '100%', minWidth: 200, visibility: if @state.isNumberPickerVisible then 'visible' else 'hidden' }}>
        <NumberPicker values={@state.values} onChange={@onChangeNumberPicker} />
        <div style={{ display: 'flex', justifyContent: 'center', marginTop: 5 }}>
          <Button color="red" onClick={@onClickCancel} size="mini">취소</Button>
          <Button onClick={@onClickConfirm} size="mini" style={{ marginLeft: 5 }}>확인</Button>
        </div>
      </div>
    </div>