import React, { useCallback, useState } from 'react'

import { Form, FormItem, TextInput, PasswordInput } from 'react-icecream'

export default function Demo() {
  const [name, setName] = useState('icecream')
  const [pwd, setPwd] = useState('')

  const nameError = validateName(name)
  const pwdError = validatePwd(pwd)

  const handleSubmit = useCallback(() => {
    if (nameError || pwdError) {
      alert('表单输入有误')
      return
    }
    alert('submit')
  }, [nameError, pwdError])

  return (
    <>
      <Form
        layout="horizontal"
        labelWidth="3em"
        onSubmit={handleSubmit}
      >
        <FormItem
          label="用户名"
          tip="用户名是你用来注册的邮箱或手机号"
          validateStatus={nameError ? 'error' : 'success'}
          validateMessage={nameError}
          required
        >
          <TextInput value={name} onChange={setName} />
        </FormItem>
        <FormItem
          label="密码"
          validateStatus={pwdError ? 'error' : 'success'}
          validateMessage={pwdError}
          required
        >
          <PasswordInput
            placeholder="请输入密码"
            value={pwd}
            onChange={setPwd}
          />
        </FormItem>
      </Form>
    </>
  )
}

function validateName(name: string) {
  return name ? null : '用户名不可为空'
}

function validatePwd(pwd: string) {
  if (!pwd) return '密码不可为空'
  if (pwd.length < 6) return '密码格式不正确'
}