import React, { useEffect } from 'react'
import { reaction } from 'mobx'
import { observer } from 'mobx-react'
import { FieldState, Validator } from 'formstate-x'

import { TextInput, useFormstateX } from 'react-icecream/form-x'

// 简易的用于构造 field state 的 React hook 实现
function useFieldState<T>(initialValue: T, ...validators: Array<Validator<T>>) {
  return useFormstateX(
    () => new FieldState<T>(initialValue).validators(...validators),
    [initialValue, ...validators]
  )
}

export default observer(() => {
  const nameState = useFieldState('', notEmpty)

  useEffect(() => reaction(
    () => nameState.error,
    error => error && console.warn('Error:', error)
  ), [nameState])

  return (
    <>
      <p style={{ margin: '0 0 1em' }}>Plz input your name: </p>
      <TextInput state={nameState} />
      {nameState.value && <p>Hello {nameState.value}!</p>}
    </>
  )
})

function notEmpty(v: string) {
  return v.trim() === '' && 'empty input'
}