import "./index.less";
import { useNavigate } from "react-router-dom";
import { commonRouters, menuRouters } from "../../router";
import {
  Input,
  Modal,
  Form,
  Message,
  Button,
  Space,
  Radio,
  Tooltip,
} from "@arco-design/web-react";
const InputSearch = Input.Search;
const RadioGroup = Radio.Group;
import { useEffect, useRef, useState } from "react";

type TLoginMethod = "usePass" | "useSms";

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

function Nav() {
  const navigate = useNavigate();
  const [loginForm] = Form.useForm();
  const [visible, setVisible] = useState(false);
  const [confirmLoading, setConfirmLoading] = useState(false);
  const [loginMethod, setLoginMethod] = useState<TLoginMethod>("useSms");
  let [countdown, setCountdown] = useState(DURATION);
  const timer = useRef<any>();

  const onClickSmsBtn = () => {
    setTimeout(() => {
      Message.success("验证码已发送");
      timer.current = setInterval(() => setCountdown(countdown--), 1000);
    }, 500);
  };

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

  return (
    <header>
      <nav className="container">
        <div className="start">
          <svg
            fill="currentColor"
            className="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path d="M158.165333 499.498667A42.496 42.496 0 0 0 170.666667 469.333333V256a42.666667 42.666667 0 0 1 42.666666-42.666667 42.666667 42.666667 0 0 0 0-85.333333C142.762667 128 85.333333 185.429333 85.333333 256v195.669333l-30.165333 30.165334a42.666667 42.666667 0 0 0 0 60.330666l30.165333 30.165334V768c0 70.570667 57.429333 128 128 128a42.666667 42.666667 0 0 0 0-85.333333 42.666667 42.666667 0 0 1-42.666666-42.666667v-213.333333a42.496 42.496 0 0 0-12.501334-30.165334L145.664 512l12.501333-12.501333zM978.090667 495.658667a42.709333 42.709333 0 0 0-9.258667-13.824L938.666667 451.669333V256c0-70.570667-57.429333-128-128-128a42.666667 42.666667 0 1 0 0 85.333333 42.666667 42.666667 0 0 1 42.666666 42.666667v213.333333a42.581333 42.581333 0 0 0 12.501334 30.165334l12.501333 12.501333-12.501333 12.501333A42.496 42.496 0 0 0 853.333333 554.666667v213.333333a42.666667 42.666667 0 0 1-42.666666 42.666667 42.666667 42.666667 0 1 0 0 85.333333c70.570667 0 128-57.429333 128-128v-195.669333l30.165333-30.165334a42.709333 42.709333 0 0 0 9.258667-46.506666zM669.738667 225.450667a42.752 42.752 0 0 0-69.546667 14.762666l-255.829333 512a42.624 42.624 0 0 0 23.893333 55.424 42.922667 42.922667 0 0 0 55.552-23.765333l255.786667-512a42.538667 42.538667 0 0 0-9.813334-46.421333z"></path>
          </svg>
          <span>Backset</span>
        </div>
        <div className="middle">
          {menuRouters.map(
            (route) =>
              !route.invisible && (
                <span key={route.path} onClick={() => navigate(route.path)}>
                  {route.name}
                </span>
              )
          )}
          <InputSearch allowClear placeholder="搜索" style={{ width: 150 }} />
        </div>
        <div className="end">
          <span onClick={() => setVisible(true)}>登录</span>
          <Modal
            style={{ width: "350px" }}
            visible={visible}
            closeIcon={false}
            footer={null}
            confirmLoading={confirmLoading}
            onCancel={() => setVisible(false)}
          >
            <div className="form-structor">
              <div
                className={`login-sms ${
                  loginMethod === "useSms" ? "" : "slide-up"
                }`}
              >
                <h2
                  className="form-title"
                  onClick={() => setLoginMethod("useSms")}
                >
                  验证码登录{" "}
                </h2>
                <div className="form-holder">
                  <input
                    type="text"
                    className="input"
                    placeholder="用户名/手机"
                  />
                  <div className="sms-group">
                    <input
                      className="input"
                      type="password"
                      placeholder="验证码"
                    ></input>
                    <Button type="text" onClick={onClickSmsBtn}>
                      {countdown === DURATION ? "获取" : countdown + "s"}
                    </Button>
                  </div>
                </div>
                <button className="submit-btn">登录</button>
              </div>
              {/* 密码 */}
              <div
                className={`login-pass ${
                  loginMethod === "usePass" ? "" : "slide-up"
                }`}
              >
                <div className="center">
                  <h2
                    className="form-title"
                    onClick={() => setLoginMethod("usePass")}
                  >
                    密码登录
                  </h2>
                  <div className="form-holder">
                    <input
                      type="text"
                      className="input"
                      placeholder="用户名/手机"
                    />
                    <input
                      type="password"
                      className="input"
                      placeholder="密码"
                    />
                  </div>
                  <button className="submit-btn">登录</button>
                </div>
              </div>
            </div>
          </Modal>
        </div>
      </nav>
    </header>
  );
}

export default Nav;
