import {Module} from "@/interfaces";
import useExamStore from "@/stores/examStore";
import {moduleLabels} from "@/utils/moduleUtils";
import clsx from "clsx";
import {motion} from "framer-motion";
import {ReactNode, useEffect, useState} from "react";
import {BsBook, BsClipboard, BsHeadphones, BsMegaphone, BsPen, BsStopwatch} from "react-icons/bs";
import ProgressBar from "../Low/ProgressBar";
import TimerEndedModal from "../TimerEndedModal";
import Timer from "./Timer";

interface Props {
	minTimer: number;
	module: Module;
	label?: string;
	exerciseIndex: number;
	totalExercises: number;
	disableTimer?: boolean;
	partLabel?: string;
	showTimer?: boolean;
}

export default function ModuleTitle({ 
	minTimer, module, label, exerciseIndex, totalExercises, disableTimer = false, partLabel, showTimer = true
}: Props) {

	const moduleIcon: {[key in Module]: ReactNode} = {
		reading: <BsBook className="text-ielts-reading w-6 h-6" />,
		listening: <BsHeadphones className="text-ielts-listening w-6 h-6" />,
		writing: <BsPen className="text-ielts-writing w-6 h-6" />,
		speaking: <BsMegaphone className="text-ielts-speaking w-6 h-6" />,
		level: <BsClipboard className="text-ielts-level w-6 h-6" />,
	};

	return (
		<>
			{showTimer && <Timer minTimer={minTimer} disableTimer={disableTimer} />}
			<div className="w-full">
				{partLabel && (
					<div className="text-3xl space-y-4">
						{partLabel.split("\n\n").map((line, index) => {
							if (index == 0)
								return (
									<p key={index} className="font-bold">
										{line}
									</p>
								);
							else
								return (
									<p key={index} className="text-2xl font-semibold">
										{line}
									</p>
								);
						})}
					</div>
				)}
				<div className={clsx("flex gap-6 w-full h-fit items-center", partLabel ? "mt-10" : "mt-5")}>
					<div className="w-12 h-12 bg-mti-gray-smoke flex items-center justify-center rounded-lg">{moduleIcon[module]}</div>
					<div className="flex flex-col gap-3 w-full">
						<div className="w-full flex justify-between">
							<span className="text-base font-semibold">
								{moduleLabels[module]} exam {label && `- ${label}`}
							</span>
							<span className="text-sm font-semibold self-end">
								Question {exerciseIndex}/{totalExercises}
							</span>
						</div>
						<ProgressBar color={module} label="" percentage={(exerciseIndex * 100) / totalExercises} className="h-2 w-full" />
					</div>
				</div>
			</div>
		</>
	);
}
