/* eslint-disable @next/next/no-img-element */
import Head from "next/head";
import Navbar from "@/components/Navbar";
import {useEffect, useState} from "react";
import {Module} from "@/interfaces";

// TODO: Remove this import
import JSON_USER from "@/demo/user.json";
import JSON_READING from "@/demo/reading.json";
import JSON_LISTENING from "@/demo/listening.json";

import Selection from "@/exams/Selection";
import Reading from "@/exams/Reading";
import {Exam, ListeningExam, ReadingExam} from "@/interfaces/exam";
import Listening from "@/exams/Listening";

export default function Home() {
	const [selectedModules, setSelectedModules] = useState<Module[]>([]);
	const [moduleIndex, setModuleIndex] = useState(0);
	const [exam, setExam] = useState<Exam>();

	useEffect(() => {
		if (selectedModules.length > 0 && moduleIndex < selectedModules.length) {
			setExam(getExam(selectedModules[moduleIndex]));
		}
	}, [selectedModules, moduleIndex]);

	const getExam = (module: Module): Exam | undefined => {
		switch (module) {
			case "reading":
				return JSON_READING as ReadingExam;
			case "listening":
				return JSON_LISTENING as ListeningExam;
		}

		return undefined;
	};

	const renderScreen = () => {
		if (selectedModules.length === 0) {
			return <Selection user={JSON_USER} onStart={setSelectedModules} />;
		}

		if (moduleIndex >= selectedModules.length) {
			return <>Finished!</>;
		}

		if (exam && exam.module === "reading") {
			return <Reading exam={exam} onFinish={() => setModuleIndex((prev) => prev + 1)} />;
		}

		if (exam && exam.module === "listening") {
			return <Listening exam={exam} onFinish={() => setModuleIndex((prev) => prev + 1)} />;
		}

		return <>Loading...</>;
	};

	return (
		<>
			<Head>
				<title>Create Next App</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-screen flex flex-col items-center bg-neutral-100 text-black">
				<Navbar profilePicture={JSON_USER.profilePicture} />
				{renderScreen()}
			</main>
		</>
	);
}
