'use client'

import Image from "next/image";
import Link from "next/link";
import SubmitBtn from "./SubmitBtn";

import { FormEvent, useState } from "react";
import { useRouter } from "next/navigation";
import { Errors } from "@/types/auth";

const BE_API = "http://localhost:8000"

export default function RegisterForm() {

    const [errorMsg, setErrorMsg] = useState<Errors>({});
    const router = useRouter();

    const handleSubmit = async (e: FormEvent<HTMLFormElement>) => {
        e.preventDefault();

        const formData = new FormData(e.currentTarget);

        const email = formData.get("email");
        const password = formData.get("password");
        const password2 = formData.get("re-password");

        try {
            const res = await fetch(`${BE_API}/api/register`, {
                method: "POST",
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ email, password, password2 })
            })

            const data = await res.json();
            setErrorMsg(data)


            if (!data.status) {
                return { error: data.message }
            }
        } catch (error) {
            return {
                message: "Please, enter a valid email and password."
            };
        }

        router.push("/");
    }

    return (
        <form onSubmit={handleSubmit} className="bg-white w-[500px] h-[500px] shadow-xl rounded-xl p-2 py-4 gap-1 flex flex-col items-center justify-around">
            <h1 className="text-xl font-bold uppercase py-3">Register</h1>
            <div className="flex flex-col">
                <input
                    type="email"
                    name="email"
                    className="border-gray-300 border w-[430px] rounded-lg px-2 py-2"
                    placeholder="Email"
                    aria-describedby="email-error"
                />
            </div>
            <div id="email-error" aria-live="polite" aria-atomic="true" className="w-full pl-7">
                {errorMsg.errors?.email &&
                    errorMsg.errors?.email.map((error: string) => (
                        <p className="text-sm text-red-500 text-left" key={error}>
                            {error}
                        </p>
                    ))}
            </div>
            <div className="flex flex-col">
                <input
                    type="password"
                    name="password"
                    className="border-gray-300 border w-[430px] rounded-lg px-2 py-2"
                    placeholder="Password"
                    aria-describedby="password-error"
                />
            </div>
            <div id="password-error" aria-live="polite" aria-atomic="true" className="w-full pl-7">
                {errorMsg.errors?.password &&
                    errorMsg.errors?.password.map((error: string) => (
                        <p className="text-sm text-red-500 text-left" key={error}>
                            {error}
                        </p>
                    ))}
            </div>
            <div className="flex flex-col">
                <input
                    type="password"
                    name="re-password"
                    className="border-gray-300 border w-[430px] rounded-lg px-2 py-2"
                    placeholder="Re-Password"
                    aria-describedby="password2-error"
                />
            </div>
            <div id="password2-error" aria-live="polite" aria-atomic="true" className="w-full pl-7">
                {errorMsg.errors?.password2 &&
                    errorMsg.errors?.password2.map((error: string) => (
                        <p className="text-sm text-red-500 text-left" key={error}>
                            {error}
                        </p>
                    ))}
            </div>
            <SubmitBtn operation="Register" />
            <div className="w-full text-sm text-black text-center">
                <h3 className="mt-1">
                    Already have an account? <Link href={"/auth/login"} className="text-[#4070f4] font-bold hover:underline">Login here</Link>
                </h3>
            </div>

            <hr className="w-[90%] my-2" />

            <div className="my-2 flex flex-col gap-2 w-[90%]">
                <div className="cursor-pointer rounded-xl flex w-full h-[30px] items-center gap-5 border-gray-300 border px-2 py-5 hover:opacity-30 duration-200">
                    <Image
                        src="https://cdn1.iconfinder.com/data/icons/google-s-logo/150/Google_Icons-09-512.png"
                        width={35}
                        height={35}
                        alt="google-logo"
                        className="justify-start"
                    />
                    <button
                        id="name"
                        name="name"
                        defaultValue=""
                        className="py-2 rounded-md outline-none text-black w-[70%] text-center"
                    >Register with Google</button>
                </div>
            </div>
        </form>
    )
}