import React from 'react'
import { FormState, FieldState, bindInput } from 'formstate-x'
import { observer } from 'mobx-react'

import { Form, FormItem, useFormstateX, InputGroup, InputGroupItem, useStateInFormItem } from 'react-icecream/form-x'
import { AddThinIcon, RemoveThinIcon } from 'react-icecream/icons'

interface CounterProps {
  state: FieldState<number>
}

const Counter = observer(function _Counter({ state }: CounterProps) {

  // `useStateInFormItem` registers Counter's state to FormItem
  useStateInFormItem(state)

  const { value, onChange } = bindInput(state)

  return (
    <InputGroup style={{ width: '120px' }}>
      <InputGroupItem>
        <AddThinIcon style={{ height: '100%' }} onClick={() => onChange(value + 1)} />
      </InputGroupItem>
      <InputGroupItem style={{ flex: '1 1 auto', textAlign: 'center' }}>{value}</InputGroupItem>
      <InputGroupItem>
        <RemoveThinIcon style={{ height: '100%' }} onClick={() => onChange(value - 1)} />
      </InputGroupItem>
    </InputGroup>
  )
})

export default observer(() => {

  const state = useFormstateX(() => new FormState({
    count: new FieldState(0).validators(v => v <= 0 && 'Positive required.')
  }), [])

  return (
    <Form state={state} onSubmit={v => alert(v.count)}>
      {/* So we don't need to pass `state.$.count` to `FormItem` here */}
      <FormItem label="Count">
        <Counter state={state.$.count} />
      </FormItem>
    </Form>
  )
})