'use client';
import { useState } from 'react';
import { Button } from '@/components/ui/button';
import GoogleIcon from '../../../../public/icons/google.svg';
import { InputField } from '@/components/ui/inputfield';
import { validate, registerUser } from './register';
import { useAuthContext } from '@/lib/contexts/Auth.context';
import Image from 'next/image';
import { useRouter } from 'next/navigation';
export default function RegisterForm({ redirectTo }: { redirectTo?: string }) {
    const [errors, setErrors] = useState<any>({});
    const [loading, setLoading] = useState(false);
    const router = useRouter();
    const { setUser } = useAuthContext();
    const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
        e.preventDefault();
        setLoading(true);
        setErrors({});

        const formData = new FormData(e.currentTarget);
        const username = formData.get('username')?.toString() || '';
        const email = formData.get('email')?.toString() || '';
        const password = formData.get('password')?.toString() || '';
        const passwordConfirm =
            formData.get('passwordConfirm')?.toString() || '';

        const validationErrors = validate(
            username,
            email,
            password,
            passwordConfirm,
        );

        if (Object.keys(validationErrors).length > 0) {
            setErrors(validationErrors);
            setLoading(false);
            return;
        }

        const { data, error } = await registerUser(username, email, password);

        if (error) {
            setErrors(error);
        } else if (data) {
            setUser(data);
            if (redirectTo) router.push(redirectTo);
        }
        setLoading(false);
    };

    return (
        <form
            onSubmit={handleSubmit}
            className="flex flex-col gap-5 min-w-[310px] w-fit"
        >
            <Button className="w-full bg-white hover:bg-white hover:text-black">
                <GoogleIcon />
                <span className="text-black">Войти через Google</span>
            </Button>

            <div className="flex flex-col gap-2.5">
                <div className="flex flex-col ">
                    <InputField placeholder="Никнейм" name="username" />
                    {errors.username && (
                        <p className="text-red pl-5 text-[12px] leading-[16px] mt-[5px]">
                            {errors.username}
                        </p>
                    )}
                </div>

                <div className="flex flex-col">
                    <InputField placeholder="E-mail" name="email" />
                    {errors.email && (
                        <p className="text-red pl-5 text-[12px] leading-[16px] mt-[5px]">
                            {errors.email}
                        </p>
                    )}
                </div>

                <div className="flex flex-col ">
                    <InputField
                        isPassword
                        placeholder="Пароль"
                        type="password"
                        name="password"
                    />
                    {errors.password && (
                        <p className="text-red pl-5 text-[12px] leading-[16px] mt-[5px]">
                            {errors.password}
                        </p>
                    )}
                </div>

                <div className="flex flex-col ">
                    <InputField
                        isPassword
                        placeholder="Повторите пароль"
                        type="password"
                        name="passwordConfirm"
                    />
                    {errors.passwordConfirm && (
                        <p className="text-red pl-5 text-[12px] leading-[16px] mt-[5px]">
                            {errors.passwordConfirm}
                        </p>
                    )}
                </div>
            </div>

            {errors.general && <p className="text-red ">{errors.general}</p>}

            <Button type="submit" className="w-full" disabled={loading}>
                {loading ? 'Регистрация...' : 'Зарегистрироваться'}
            </Button>
        </form>
    );
}