/* eslint-disable @next/next/no-img-element */
import Icon from "@mdi/react";
import {mdiAccountVoice, mdiArrowLeft, mdiArrowRight, mdiBookOpen, mdiHeadphones, mdiPen} from "@mdi/js";
import {useEffect, useState} from "react";
import {Module} from "@/interfaces";
import clsx from "clsx";
import {useRouter} from "next/router";
import {errorButtonStyle, infoButtonStyle} from "@/constants/buttonStyles";
import ProfileLevel from "@/components/ProfileLevel";
import {User} from "@/interfaces/user";
import useExamStore from "@/stores/examStore";
import ProgressBar from "@/components/Low/ProgressBar";
import {BsBook, BsFileEarmarkText, BsHeadphones, BsMegaphone, BsPen, BsPencil, BsStar} from "react-icons/bs";
import {averageScore, formatModuleTotalStats, totalExams, totalExamsByModule} from "@/utils/stats";
import useStats from "@/hooks/useStats";
import Button from "@/components/Low/Button";

interface Props {
	user: User;
	onStart: (modules: Module[]) => void;
}

export default function Selection({user, onStart}: Props) {
	const [selectedModules, setSelectedModules] = useState<Module[]>([]);
	const {stats} = useStats(user?.id);

	const calculateAverageLevel = () => {
		return Object.keys(user!.levels).reduce((accumulator, current) => user!.levels[current as Module] + accumulator, 0) / 4;
	};

	const router = useRouter();

	const toggleModule = (module: Module) => {
		const modules = selectedModules.filter((x) => x !== module);
		setSelectedModules((prev) => (prev.includes(module) ? modules : [...modules, module]));
	};

	return (
		<>
			<div className="w-full h-full relative flex flex-col gap-16">
				<section className="w-full flex gap-8">
					<img src={user.profilePicture} alt={user.name} className="aspect-square h-64 rounded-3xl drop-shadow-xl" />
					<div className="flex flex-col gap-4 py-4 w-full">
						<div className="flex justify-between w-full gap-8">
							<div className="flex flex-col gap-2 py-2">
								<h1 className="font-bold text-4xl">{user.name}</h1>
								<h6 className="font-normal text-base text-mti-gray-taupe capitalize">{user.type}</h6>
							</div>
							<ProgressBar
								label={`Level ${calculateAverageLevel().toFixed(1)}`}
								percentage={Math.round((calculateAverageLevel() * 100) / 9)}
								color="blue"
								className="max-w-xs w-32 self-end h-10"
							/>
						</div>
						<ProgressBar label="" percentage={70} color="blue" className="w-full h-3 drop-shadow-lg" />
						<div className="flex justify-between w-full mt-8">
							<div className="flex gap-4 items-center">
								<div className="w-16 h-16 border border-mti-gray-platinum bg-mti-gray-smoke flex items-center justify-center rounded-xl">
									<BsBook className="text-ielts-reading w-8 h-8" />
								</div>
								<div className="flex flex-col">
									<span className="font-bold text-xl">{totalExamsByModule(stats, "reading")}</span>
									<span className="font-normal text-base text-mti-gray-dim">Reading</span>
								</div>
							</div>
							<div className="flex gap-4 items-center">
								<div className="w-16 h-16 border border-mti-gray-platinum bg-mti-gray-smoke flex items-center justify-center rounded-xl">
									<BsHeadphones className="text-ielts-listening w-8 h-8" />
								</div>
								<div className="flex flex-col">
									<span className="font-bold text-xl">{totalExamsByModule(stats, "listening")}</span>
									<span className="font-normal text-base text-mti-gray-dim">Listening</span>
								</div>
							</div>
							<div className="flex gap-4 items-center">
								<div className="w-16 h-16 border border-mti-gray-platinum bg-mti-gray-smoke flex items-center justify-center rounded-xl">
									<BsPen className="text-ielts-writing w-8 h-8" />
								</div>
								<div className="flex flex-col">
									<span className="font-bold text-xl">{totalExamsByModule(stats, "writing")}</span>
									<span className="font-normal text-base text-mti-gray-dim">Writing</span>
								</div>
							</div>
							<div className="flex gap-4 items-center">
								<div className="w-16 h-16 border border-mti-gray-platinum bg-mti-gray-smoke flex items-center justify-center rounded-xl">
									<BsMegaphone className="text-ielts-speaking w-8 h-8" />
								</div>
								<div className="flex flex-col">
									<span className="font-bold text-xl">{totalExamsByModule(stats, "speaking")}</span>
									<span className="font-normal text-base text-mti-gray-dim">Speaking</span>
								</div>
							</div>
						</div>
					</div>
				</section>
				<section className="flex flex-col gap-3">
					<span className="font-bold text-lg">About Exams</span>
					<span className="text-mti-gray-taupe">
						This comprehensive test will assess your proficiency in reading, listening, writing, and speaking English. Be prepared to dive
						into a variety of interesting and challenging topics while showcasing your ability to communicate effectively in English.
						Master the vocabulary, grammar, and interpretation skills required to succeed in this high-level exam. Are you ready to
						demonstrate your mastery of the English language to the world?
					</span>
				</section>
				<section className="w-full flex justify-between gap-8 mt-8">
					<div
						className={clsx(
							"relative w-fit max-w-xs flex flex-col items-center bg-mti-white-alt transition duration-300 ease-in-out border p-5 rounded-xl gap-2 pt-12",
							selectedModules.includes("reading") ? "border-mti-green-light" : "border-mti-gray-platinum",
						)}>
						<div className="absolute w-16 h-16 flex items-center justify-center rounded-full bg-ielts-reading top-0 -translate-y-1/2">
							<BsBook className="text-white w-7 h-7" />
						</div>
						<span className="font-semibold">Reading:</span>
						<p className="text-center text-xs">
							Expand your vocabulary, improve your reading comprehension and improve your ability to interpret texts in English.
						</p>
						<Button
							color="green"
							variant={selectedModules.includes("reading") ? "solid" : "outline"}
							className="mt-4 px-12"
							onClick={() => toggleModule("reading")}>
							Select exam
						</Button>
					</div>
					<div
						className={clsx(
							"relative w-fit max-w-xs flex flex-col items-center bg-mti-white-alt transition duration-300 ease-in-out border p-5 rounded-xl gap-2 pt-12",
							selectedModules.includes("listening") ? "border-mti-green-light" : "border-mti-gray-platinum",
						)}>
						<div className="absolute w-16 h-16 flex items-center justify-center rounded-full bg-ielts-listening top-0 -translate-y-1/2">
							<BsHeadphones className="text-white w-7 h-7" />
						</div>
						<span className="font-semibold">Listening:</span>
						<p className="text-center text-xs">
							Improve your ability to follow conversations in English and your ability to understand different accents and intonations.
						</p>
						<Button
							color="green"
							variant={selectedModules.includes("listening") ? "solid" : "outline"}
							className="mt-4 px-12"
							onClick={() => toggleModule("listening")}>
							Select exam
						</Button>
					</div>
					<div
						className={clsx(
							"relative w-fit max-w-xs flex flex-col items-center bg-mti-white-alt transition duration-300 ease-in-out border p-5 rounded-xl gap-2 pt-12",
							selectedModules.includes("writing") ? "border-mti-green-light" : "border-mti-gray-platinum",
						)}>
						<div className="absolute w-16 h-16 flex items-center justify-center rounded-full bg-ielts-writing top-0 -translate-y-1/2">
							<BsPen className="text-white w-7 h-7" />
						</div>
						<span className="font-semibold">Writing:</span>
						<p className="text-center text-xs">
							Allow you to practice writing in a variety of formats, from simple paragraphs to complex essays.
						</p>
						<Button
							color="green"
							variant={selectedModules.includes("writing") ? "solid" : "outline"}
							className="mt-4 px-12"
							onClick={() => toggleModule("writing")}>
							Select exam
						</Button>
					</div>
					<div
						className={clsx(
							"relative w-fit max-w-xs flex flex-col items-center bg-mti-white-alt transition duration-300 ease-in-out border p-5 rounded-xl gap-2 pt-12",
							selectedModules.includes("speaking") ? "border-mti-green-light" : "border-mti-gray-platinum",
						)}>
						<div className="absolute w-16 h-16 flex items-center justify-center rounded-full bg-ielts-speaking top-0 -translate-y-1/2">
							<BsMegaphone className="text-white w-7 h-7" />
						</div>
						<span className="font-semibold">Speaking:</span>
						<p className="text-center text-xs">
							You&apos;ll have access to interactive dialogs, pronunciation exercises and speech recordings.
						</p>
						<Button
							color="green"
							variant={selectedModules.includes("speaking") ? "solid" : "outline"}
							className="mt-4 px-12"
							onClick={() => toggleModule("speaking")}>
							Select exam
						</Button>
					</div>
				</section>
			</div>
		</>
	);
}