import { useState, useEffect } from "react";
import { PrimaryButton } from "../../../components/button/PrimaryButton";
import { Input } from "../../../components/input/Input";
import { useAppDispatch, useAppSelector } from "../../../redux/hooks";
import { useNavigate } from "react-router-dom";
import { registerUser } from "../../../redux/slices/auth";
// import { cn } from "../../../lib/cn";
import { setMenuActivePage } from "../../../redux/slices/store";
import { Balloon } from "../../../assets/icons/auth";
import { Link } from "react-router-dom";
import { SecondaryButton } from "../../../components/button/SecondaryButton";
import { Checkbox } from "../../../components/checkbox/Checkbox";
import { googleLogo } from "../../../assets/icons/input";


const Register = () => {
  const dispatch = useAppDispatch();
  const navigate = useNavigate();

  const [username, setUsername] = useState<string>("");
  const [email, setEmail] = useState<string>("");
  const [password, setPassword] = useState<string>("");
  const [confirmPassword, setConfirmPassword] = useState<string>("");
  const [submitClicked, setSubmitClicked] = useState<boolean>(false);

  const { status, jwt } = useAppSelector((state) => state.auth);

  // После успешной регистрации — переход в систему

  useEffect(() => {
    dispatch(setMenuActivePage("account"))
  }, []);

  useEffect(() => {
    if (jwt) {
      navigate("/home");
    }
    console.log(submitClicked);
  }, [jwt]);

  const handleRegister = () => {
    setSubmitClicked(true);

    if (!username || !email || !password || !confirmPassword) return;
    if (password !== confirmPassword) return;

    dispatch(registerUser({ username, email, password }));
  };

  return (
    <div className="h-svh w-svw fixed pointer-events-none top-0 left-0 flex items-center justify-center">
      <div className="grid gap-[80px] grid-cols-[400px,384px]  box-border relative ">
        <div className="flex items-center justify-center ">
          <img src={Balloon} />
        </div>
        <div className=" relative pointer-events-auto">
          <div>
            <div className="text-[40px] text-liquid-white font-bold h-[50px]">
              Добро пожаловать
            </div>
            <div className="text-[18px] text-liquid-light font-bold h-[23px]">
              Регистрация
            </div>
          </div>


          <Input name="email" autocomplete="email" className="mt-[10px]" type="email" label="Почта" onChange={(v) => {setEmail(v)}} placeholder="example@gmail.com" />
          <Input name="login" autocomplete="login" className="mt-[10px]" type="text" label="Логин пользователя" onChange={(v) => {setUsername(v)}} placeholder="login" />
          <Input name="password" autocomplete="password" className="mt-[10px]" type="password" label="Пароль" onChange={(v) => {setPassword(v)}} placeholder="abCD1234" />
          <Input name="confirm-password" autocomplete="confirm-password" className="mt-[10px]" type="password" label="Повторите пароль" onChange={(v) => {setConfirmPassword(v)}} placeholder="abCD1234" />

          <div className=" flex items-center mt-[10px] h-[24px]">
            <Checkbox
              onChange={(value: boolean) => { value; }}
              className="p-0 w-fit  m-[2.75px]"
              size="md"
              color="secondary"
              variant="default" />
            <span className="text-[14px] font-medium text-liquid-light h-[18px] ml-[10px]">
              Я принимаю <Link
                to={"/home"}
                className={" underline"}
              >
                политику конфиденциальности
              </Link>
            </span>

          </div>

          <div className="mt-[10px]">
            <PrimaryButton
              className="w-full mb-[8px]"
              onClick={() => handleRegister()}
              text={status === "loading" ? "Регистрация..." : "Регистрация"}
              disabled={status === "loading"}
            />
            <SecondaryButton
              className="w-full"
              onClick={() => { }}
            >
              <div className="flex items-center">
                <img src={googleLogo} className="h-[24px] w-[24px] mr-[15px]" />
                Регистрация с Google
              </div>
            </SecondaryButton>
          </div>


          <div className="flex justify-center mt-[10px]">
            <span>
              Уже есть аккаунт? <Link
                to={"/home/login"}
                className={"text-liquid-brightmain text-[16px] h-[20px] transition-all hover:underline "}>
                Авторизация
              </Link>
            </span>

          </div>
        </div>

      </div>
    </div>
  );
};

export default Register;