import Input from '../Input/Input.coffee'

export default observer class NumberPicker extends Component
  # props
  # onChange: Func
  # values: Array

  constructor: (props) ->
    super props

    min = props.values[0]

    max = props.values[1]

    @state = observable
      min: if min then min.toString() else ''
      max: if max then max.toString() else ''

    reaction(
      =>
        @state.min + @state.max
    ,
      =>
        props.onChange [@state.min, @state.max]
    )

  onChangeInput: (event, data) =>
    @state[data.name] = data.value

  componentDidUpdate: =>
    min = @props.values[0]

    max = @props.values[1]

    @state.min = if min then min.toString() else ''

    @state.max = if max then max.toString() else ''

  render: =>
    <div>
      <div style={{ display: 'flex' }}>
        <div style={{ flex: 1 }}>
          <Input placeholder="숫자" size="mini" value={@state.min} onChange={@onChangeInput} name="min" isResetVisible type="number" resetButtonSize="small" isHeaderVisible={false} />
        </div>
        <div style={{ flexBasis: 40, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
          <div style={{ fontSize: 12, marginTop: -3 }}>부터</div>
        </div>
      </div>
      <div style={{ display: 'flex', marginTop: 3 }}>
        <div style={{ flex: 1 }}>
          <Input placeholder="숫자" size="mini" value={@state.max} onChange={@onChangeInput} name="max" isResetVisible type="number" resetButtonSize="small" isHeaderVisible={false} />
        </div>
        <div style={{ flexBasis: 40, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
          <div style={{ fontSize: 12, marginTop: -3 }}>까지</div>
        </div>
      </div>
    </div>