// @ts-nocheck
import React from "react";
import {
  Form,
  Input,
  RadioGroup,
  Radio,
  CheckboxGroup,
  Checkbox,
  Card,
  InputNumber,
  Button,
} from "@tencent/tea-component";

// eslint-disable-next-line
import { useForm, Controller } from "react-hook-form";

const sleep = ms => new Promise(resolve => setTimeout(resolve, ms));

export default function FormWithReactFinalFormExample() {
  const { control, handleSubmit, formState, errors } = useForm({ mode: "all" });

  async function onSubmit(values) {
    await sleep(1000);
    alert(JSON.stringify(values));
  }

  function getStatus(meta) {
    if (!meta.isDirty && !formState.isSubmitted) {
      return null;
    }
    return meta.invalid ? "error" : "success";
  }

  return (
    <div className="example-stage">
      <Card>
        <Card.Body>
          <form onSubmit={handleSubmit(onSubmit)}>
            <Form.Title>表单验证</Form.Title>
            <Form>
              <Controller
                name="name"
                control={control}
                defaultValue=""
                rules={{
                  validate: async value => {
                    await sleep(1000);
                    return !value || value.length < 4
                      ? "昵称太短了哦"
                      : undefined;
                  },
                }}
                render={(input, meta) => (
                  <Form.Item
                    label="昵称"
                    status={
                      formState.isValidating ? "validating" : getStatus(meta)
                    }
                    message={errors.name?.message}
                  >
                    <Input {...input} autoComplete="off" placeholder="你是谁" />
                  </Form.Item>
                )}
              />
              <Controller
                name="sex"
                defaultValue={null}
                control={control}
                rules={{
                  validate: value => (!value ? "请选择性别" : undefined),
                }}
                render={({ value, onChange }, meta) => (
                  <Form.Item
                    label="性别"
                    status={getStatus(meta)}
                    message={errors.sex?.message}
                  >
                    <RadioGroup value={value} onChange={onChange}>
                      <Radio name="male">男</Radio>
                      <Radio name="female">女</Radio>
                    </RadioGroup>
                  </Form.Item>
                )}
              />
              <Controller
                name="age"
                defaultValue={18}
                control={control}
                rules={{
                  validate: value =>
                    value < 18 ? "你好像还未成年哦" : undefined,
                }}
                render={({ value, onChange, onBlur }, meta) => (
                  <Form.Item
                    label="年龄"
                    status={getStatus(meta)}
                    message={errors.age?.message}
                  >
                    <InputNumber
                      value={value}
                      onChange={onChange}
                      onBlur={onBlur}
                      min={12}
                      max={100}
                    />
                  </Form.Item>
                )}
              />
              <Controller
                name="hobbies"
                defaultValue={[]}
                control={control}
                rules={{
                  validate: value =>
                    value.length < 1 ? "请至少选择一个哦" : undefined,
                }}
                render={({ value, onChange }, meta) => (
                  <Form.Item
                    label="兴趣"
                    status={getStatus(meta)}
                    message={
                      meta.invalid
                        ? errors.hobbies?.message
                        : "选择一项或多项爱好"
                    }
                  >
                    <CheckboxGroup value={value} onChange={onChange}>
                      <Checkbox name="code">编程</Checkbox>
                      <Checkbox name="web">抠图</Checkbox>
                      <Checkbox name="jinli">超越</Checkbox>
                    </CheckboxGroup>
                  </Form.Item>
                )}
              />
            </Form>
            <Form.Action>
              <Button
                type="primary"
                htmlType="submit"
                loading={formState.isSubmitting}
              >
                提交
              </Button>
            </Form.Action>
          </form>
        </Card.Body>
      </Card>
    </div>
  );
}