import React from "react";
import { Button, Form, Schema } from "rsuite";
import Header from "./header";

const loginModel = Schema.Model({
  email: Schema.Types.StringType().isEmail("请输入正确的格式"),
  password: Schema.Types.StringType()
    .rangeLength(6, 20, "密码长度为6-20位")
    .isRequired("密码不能为空"),
});

function Login() {
  const formRef = React.useRef();
  const [formValue, setFormValue] = React.useState({});

  let login = () => {
    console.log(formValue);
    if (formRef.current.check()) {
      console.log("验证通过");
    }
  };

  return (
    <div className={"grid place-items-center pt-10 w-screen"}>
      <div className={"w-10/12"}>
        <Header title={"登录账号"} />
        <div className={"flex flex-col gap-5"}>
          <Form
            fluid
            model={loginModel}
            checkTrigger="none"
            onChange={setFormValue}
            ref={formRef}
          >
            <Form.Group controlId="email">
              <Form.Control placeholder={"请输入电子邮箱"} name="email" />
            </Form.Group>
            <Form.Group controlId="password">
              <Form.Control
                placeholder={"请输入密码"}
                name="password"
                type="password"
              />
            </Form.Group>
          </Form>
          <a className={"cursor-pointer w-fit select-none"}>忘记密码</a>
          <Button appearance={"primary"} onClick={login}>
            登录
          </Button>
          <div className={"text-center"}>
            <a
              href={"/register"}
              className={"cursor-pointer w-fit select-none"}
            >
              还没有fileset.io账号？
            </a>
          </div>
        </div>
      </div>
    </div>
  );
}

export default Login;