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

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

interface User {
  name: string
}

function createUserState(initialValue?: User) {
  return new FormState({
    name: new FieldState(initialValue?.name ?? '')
  })
}

interface UserFormProps {
  user?: User // 当前编辑的用户，如不传则代表新建
  onSubmit: (user: User) => void | Promise<void> // 表单提交的回调
}

// 用于新建或编辑用户信息的表单
function UserForm({ user, onSubmit }: UserFormProps) {
  const state = useFormstateX(createUserState, [user])

  return (
    <Form state={state} onSubmit={onSubmit}>
      <FormItem label="姓名">
        <TextInput placeholder="请输入姓名" state={state.$.name} />
      </FormItem>
    </Form>
  )
}

const motoko: User = {
  name: 'Motoko'
}

export default observer(() => {
  const [editing, setEditing] = useState(false)
  const editTarget = editing ? motoko : undefined
  const toggleEditing = useCallback(() => setEditing(v => !v), [])

  const handleSubmit = useCallback((user: User) => {
    const action = editing ? 'Update' : 'Create'
    alert(`${action}: ${JSON.stringify(user)}`)
  }, [editing])

  return (
    <>
      <div style={{ marginBottom: '1em', paddingBottom: '1em', borderBottom: '1px solid #E5E5E5' }}>
        <Button type="primary" onClick={toggleEditing}>
          {editing ? '切换为新建' : `切换为编辑 ${motoko.name}`}
        </Button>
      </div>
      <UserForm
        user={editTarget}
        onSubmit={handleSubmit}
      />
    </>
  )
})