/* eslint-disable @next/next/no-img-element */
import {ToastContainer} from "react-toastify";
import {useState} from "react";
import Head from "next/head";
import useUser from "@/hooks/useUser";
import Link from "next/link";
import clsx from "clsx";
import {Tab} from "@headlessui/react";
import RegisterIndividual from "./(register)/RegisterIndividual";
import RegisterCorporate from "./(register)/RegisterCorporate";
import EmailVerification from "./(auth)/EmailVerification";
import {sendEmailVerification} from "@/utils/email";
import useUsers from "@/hooks/useUsers";

export const getServerSideProps = (context: any) => {
	const {code} = context.query;

	return {
		props: {code: code || null},
	};
};

export default function Register({code: queryCode}: {code: string}) {
	const [isLoading, setIsLoading] = useState(false);

	const {user, mutateUser} = useUser({
		redirectTo: "/",
		redirectIfFound: true,
	});

	return (
		<>
			<Head>
				<title>Register | EnCoach</title>
				<meta name="description" content="Generated by create next app" />
				<meta name="viewport" content="width=device-width, initial-scale=1" />
				<link rel="icon" href="/favicon.ico" />
			</Head>
			<main className="w-full h-[100vh] flex bg-white text-black">
				<ToastContainer />
				<section className="h-full w-fit min-w-fit relative hidden lg:flex">
					<div className="absolute h-full w-full bg-mti-rose-light z-10 bg-opacity-50" />
					<img src="/people-talking-tablet.png" alt="People smiling looking at a tablet" className="h-full aspect-auto" />
				</section>
				<section className="h-full w-full flex flex-col items-center justify-center gap-4">
					<div className={clsx("flex flex-col items-center", !user && "mb-4")}>
						<img src="/logo_title.png" alt="EnCoach's Logo" className="w-36 lg:w-56" />
						<h1 className="font-bold text-2xl lg:text-4xl">Create new account</h1>
					</div>
					{!user && (
						<>
							<div className="flex flex-col gap-6 w-full -lg:px-8 lg:w-2/3">
								<Tab.Group>
									<Tab.List className="flex space-x-1 rounded-xl bg-mti-purple-ultralight/40 p-1">
										<Tab
											className={({selected}) =>
												clsx(
													"w-full rounded-lg py-2.5 text-sm font-medium leading-5 text-mti-purple-light",
													"ring-white ring-opacity-60 ring-offset-2 ring-offset-mti-purple-light focus:outline-none focus:ring-2",
													"transition duration-300 ease-in-out",
													selected ? "bg-white shadow" : "text-blue-100 hover:bg-white/[0.12] hover:text-mti-purple-dark",
												)
											}>
											Individual
										</Tab>
										<Tab
											className={({selected}) =>
												clsx(
													"w-full rounded-lg py-2.5 text-sm font-medium leading-5 text-mti-purple-light",
													"ring-white ring-opacity-60 ring-offset-2 ring-offset-mti-purple-light focus:outline-none focus:ring-2",
													"transition duration-300 ease-in-out",
													selected ? "bg-white shadow" : "text-blue-100 hover:bg-white/[0.12] hover:text-mti-purple-dark",
												)
											}>
											Corporate
										</Tab>
									</Tab.List>

									<Tab.Panels>
										<Tab.Panel>
											<RegisterIndividual
												isLoading={isLoading}
												setIsLoading={setIsLoading}
												mutateUser={mutateUser}
												sendEmailVerification={sendEmailVerification}
												queryCode={queryCode}
											/>
										</Tab.Panel>
										<Tab.Panel>
											<RegisterCorporate
												isLoading={isLoading}
												setIsLoading={setIsLoading}
												mutateUser={mutateUser}
												sendEmailVerification={sendEmailVerification}
											/>
										</Tab.Panel>
									</Tab.Panels>
								</Tab.Group>
							</div>
							<Link className="text-mti-purple-light text-sm font-normal" href="/login">
								Sign in instead
							</Link>
						</>
					)}
					{user && !user.isVerified && <EmailVerification user={user} isLoading={isLoading} setIsLoading={setIsLoading} />}
				</section>
			</main>
		</>
	);
}
