// @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, useField } from "react-final-form-hooks";

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

function getStatus(meta, validating) {
  if (meta.active && validating) {
    return "validating";
  }
  if (!meta.touched) {
    return null;
  }
  return meta.error ? "error" : "success";
}

export default function FormWithReactFinalFormExample() {
  async function onSubmit(values) {
    await sleep(1500);
    alert(JSON.stringify(values));
  }

  const { form, handleSubmit, validating, submitting } = useForm({
    onSubmit,
    /**
     * 默认为 shallowEqual
     * 如果初始值有多层，会导致重渲染，也可以使用 `useEffect` 设置初始值：
     * useEffect(() => form.initialize({ }), []);
     */
    initialValuesEqual: () => true,
    initialValues: { name: "", age: 18, hobbies: [] },
    validate: ({ name, sex, age, hobbies }) => ({
      name: name.length < 4 ? "昵称太短了哦" : undefined,
      sex: !sex ? "请选择性别" : undefined,
      age: age < 18 ? "你好像还未成年哦" : undefined,
      hobbies: hobbies.length < 1 ? "请至少选择一个哦" : undefined,
    }),
  });

  const name = useField("name", form);
  const sex = useField("sex", form);
  const age = useField("age", form);
  const hobbies = useField("hobbies", form);

  return (
    <div className="example-stage">
      <Card>
        <Card.Body>
          <form onSubmit={handleSubmit}>
            <Form.Title>表单验证</Form.Title>
            <Form>
              <Form.Item
                label="昵称"
                status={getStatus(name.meta, validating)}
                message={
                  getStatus(name.meta, validating) === "error" &&
                  name.meta.error
                }
              >
                <Input
                  {...name.input}
                  autoComplete="off"
                  placeholder="你是谁"
                />
              </Form.Item>
              <Form.Item
                label="性别"
                status={getStatus(sex.meta)}
                message={getStatus(sex.meta) === "error" && sex.meta.error}
              >
                <RadioGroup {...sex.input}>
                  <Radio name="male">男</Radio>
                  <Radio name="female">女</Radio>
                </RadioGroup>
              </Form.Item>
              <Form.Item
                label="年龄"
                status={age.meta.error ? "error" : "success"}
                message={age.meta.error}
              >
                <InputNumber {...age.input} min={12} max={100} />
              </Form.Item>
              <Form.Item
                label="兴趣"
                message="选择一项或多项爱好"
                status={getStatus(hobbies.meta)}
              >
                <CheckboxGroup {...hobbies.input}>
                  <Checkbox name="code">编程</Checkbox>
                  <Checkbox name="web">抠图</Checkbox>
                  <Checkbox name="jinli">超越</Checkbox>
                </CheckboxGroup>
              </Form.Item>
            </Form>
            <Form.Action>
              <Button
                type="primary"
                htmlType="submit"
                loading={submitting}
                disabled={validating}
              >
                提交
              </Button>
            </Form.Action>
          </form>
        </Card.Body>
      </Card>
    </div>
  );
}