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/account');
        }
        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;