/* eslint-disable @next/next/no-img-element */
import Head from "next/head";
import {withIronSessionSsr} from "iron-session/next";
import {sessionOptions} from "@/lib/session";
import useUser from "@/hooks/useUser";
import {toast, ToastContainer} from "react-toastify";
import Layout from "@/components/High/Layout";
import {shouldRedirectHome} from "@/utils/navigation.disabled";
import {useState} from "react";
import {Module} from "@/interfaces";
import {RadioGroup, Tab} from "@headlessui/react";
import clsx from "clsx";
import {MODULE_ARRAY} from "@/utils/moduleUtils";
import {capitalize} from "lodash";
import Button from "@/components/Low/Button";
import {Exercise, ReadingPart} from "@/interfaces/exam";
import Input from "@/components/Low/Input";
import axios from "axios";
import ReadingGeneration from "./(generation)/ReadingGeneration";
import ListeningGeneration from "./(generation)/ListeningGeneration";
import WritingGeneration from "./(generation)/WritingGeneration";
import LevelGeneration from "./(generation)/LevelGeneration";
import SpeakingGeneration from "./(generation)/SpeakingGeneration";
import {checkAccess} from "@/utils/permissions";
import {User} from "@/interfaces/user";
import { redirect, serialize } from "@/utils";
import { requestUser } from "@/utils/api";

export const getServerSideProps = withIronSessionSsr(async ({req, res}) => {
	const user = await requestUser(req, res)
	if (!user) return redirect("/login")

	if (shouldRedirectHome(user) || !checkAccess(user, ["admin", "mastercorporate", "developer", "corporate"]))
		return redirect("/")

	return {
		props: serialize({user}),
	};
}, sessionOptions);

interface Props {
	user: User;
}

export default function Generation({user}: Props) {
	const [module, setModule] = useState<Module>("reading");

	const [title, setTitle] = useState<string>("");
	return (
		<>
			<Head>
				<title>Exam Generation | EnCoach</title>
				<meta
					name="description"
					content="A training platform for the IELTS exam provided by the Muscat Training Institute and developed by eCrop."
				/>
				<meta name="viewport" content="width=device-width, initial-scale=1" />
				<link rel="icon" href="/favicon.ico" />
			</Head>
			<ToastContainer />
			{user && (
				<Layout user={user} className="gap-6">
					<h1 className="text-2xl font-semibold">Exam Generation</h1>
					<div className="flex flex-col gap-3">
						<Input
							type="text"
							placeholder="Insert a title here"
							name="title"
							label="Title"
							onChange={setTitle}
							roundness="xl"
							defaultValue={title}
							required
						/>

						<label className="font-normal text-base text-mti-gray-dim">Module</label>
						<RadioGroup
							value={module}
							onChange={setModule}
							className="flex flex-row -2xl:flex-wrap w-full gap-4 -md:justify-center justify-between">
							{[...MODULE_ARRAY].map((x) => (
								<RadioGroup.Option value={x} key={x}>
									{({checked}) => (
										<span
											className={clsx(
												"px-6 py-4 w-64 flex justify-center text-sm font-normal rounded-full border focus:outline-none cursor-pointer",
												"transition duration-300 ease-in-out",
												x === "reading" &&
													(!checked
														? "bg-white border-mti-gray-platinum"
														: "bg-ielts-reading/70 border-ielts-reading text-white"),
												x === "listening" &&
													(!checked
														? "bg-white border-mti-gray-platinum"
														: "bg-ielts-listening/70 border-ielts-listening text-white"),
												x === "writing" &&
													(!checked
														? "bg-white border-mti-gray-platinum"
														: "bg-ielts-writing/70 border-ielts-writing text-white"),
												x === "speaking" &&
													(!checked
														? "bg-white border-mti-gray-platinum"
														: "bg-ielts-speaking/70 border-ielts-speaking text-white"),
												x === "level" &&
													(!checked
														? "bg-white border-mti-gray-platinum"
														: "bg-ielts-level/70 border-ielts-level text-white"),
											)}>
											{capitalize(x)}
										</span>
									)}
								</RadioGroup.Option>
							))}
						</RadioGroup>
					</div>
					{module === "reading" && <ReadingGeneration id={title} />}
					{module === "listening" && <ListeningGeneration id={title} />}
					{module === "writing" && <WritingGeneration id={title} />}
					{module === "speaking" && <SpeakingGeneration id={title} />}
					{module === "level" && <LevelGeneration id={title} />}
				</Layout>
			)}
		</>
	);
}
