import { useEffect, useRef, useState } from "react";
import { sms, userLogin } from "../../api";
import "./index.less";
import { useNavigate } from "react-router-dom";
import { useUserStore } from "../../store/user.store";
import toast from "react-hot-toast";
const defaultForm = {
  user_login: "",
  user_pass: "",
};

const DURATION = 60; // 验证码倒计时

export default function Login() {
  const [loginForm, setLoginForm] = useState(defaultForm);
  let [countdown, setCountdown] = useState(DURATION);
  const timer = useRef<any>();
  const navigate = useNavigate();
  const setUser = useUserStore((s: any) => s.setUser);

  const onClickSmsBtn = () => {
    if (!/^1[3456789]\d{9}$/.test(loginForm.user_login))
      return toast.error("手机号格式有误");
    sms(loginForm.user_login).then((res: any) => {
      if (res?.code === 10000)
        setTimeout(() => {
          toast.success("验证码已发送");
          timer.current = setInterval(() => setCountdown(countdown--), 1000);
        }, 50);
    });
  };

  const onClickLogin = () => {
    userLogin(loginForm).then((res: any) => {
      const { code, data, msg } = res;
      if (code === 10000) {
        console.log(msg);
        navigate(-1);
        setUser(data);
      }
      if (code === 20000) console.error(msg);
    });
  };

  useEffect(() => {
    if (countdown === 0) {
      clearInterval(timer.current);
      setCountdown(DURATION);
    }
  }, [countdown]);

  return (
    <div className="container login">
      <img src="/favicon.svg" />
      <h4>欢迎，Backset.cn!</h4>
      <div style={{ width: 320 }}>
        <div className="form">
          <input
            style={{ marginTop: "1rem" }}
            type="text"
            className="input"
            placeholder="手机"
            onChange={(e) =>
              setLoginForm((p) => ({
                ...p,
                user_login: e.target.value,
              }))
            }
          />
          {/* <input
            style={{ marginTop: "1rem" }}
            className="input"
            type="password"
            onChange={(e) =>
              setLoginForm((p) => ({
                ...p,
                user_pass: e.target.value,
              }))
            }
            onKeyDown={(e) => {
              if (e.key === "Enter") onClickLogin();
            }}
            placeholder="密码"
          /> */}
          <div className="sms-group" style={{ marginTop: "1rem" }}>
            <input
              className="input"
              type="text"
              onKeyDown={(e) => {
                if (e.key === "Enter") onClickLogin();
              }}
              onChange={(e) =>
                setLoginForm((p) => ({
                  ...p,
                  user_pass: e.target.value,
                }))
              }
              placeholder="验证码"
            />
            <span
              className="bs btn ml12 sms-btn br3 outline"
              onClick={onClickSmsBtn}
            >
              {countdown === DURATION ? "获取" : countdown + "s"}
            </span>
          </div>
        </div>
        <button className="submit-btn bs btn" onClick={onClickLogin}>
          进入
        </button>
      </div>
    </div>
  );
}