import React, { useCallback, useState } from 'react'
import { FormState, FieldState, ValueOf } from 'formstate-x'
import { observer } from 'mobx-react'

import { Button } from 'react-icecream'
import { ModalForm, FormItem, useFormstateX, TextInput, PasswordInput } from 'react-icecream/form-x'

// 构造表单状态
function createFormState() {
  const usernameField = new FieldState('').validators(notEmpty)
  const passwordField = new FieldState('').validators(notEmpty)
  return new FormState({
    username: usernameField,
    password: passwordField
  })
}

// 表单中值的类型
type Value = ValueOf<ReturnType<typeof createFormState>>

export default observer(() => {

  const [visible, setVisible] = useState(false)
  const state = useFormstateX(createFormState, [])

  const handleSubmit = useCallback(async (value: Value) => {
    console.log(`Submit with: ${JSON.stringify(value)}.`)
    await new Promise<void>(resolve => setTimeout(resolve, 2000))
    setVisible(false)
  }, [])

  const handleCancel = useCallback(() => {
    console.log('Cancelled.')
    setVisible(false)
  }, [])

  return (
    <>
      <Button onClick={() => setVisible(true)}>打开弹框</Button>
      <ModalForm
        visible={visible}
        title="示例"
        state={state}
        layout="horizontal"
        labelWidth="4em"
        onSubmit={handleSubmit}
        onCancel={handleCancel}
      >
        <FormItem label="用户名" required>
          <TextInput placeholder="请输入用户名" state={state.$.username} />
        </FormItem>
        <FormItem label="密码" required>
          <PasswordInput placeholder="请输入密码" state={state.$.password} />
        </FormItem>
      </ModalForm>
    </>
  )
})

function notEmpty(v: string) {
  return v.trim() === '' && '不可为空'
}