import { Module } from "@/interfaces";
import { moduleLabels } from "@/utils/moduleUtils";
import clsx from "clsx";
import { ReactNode, useMemo, useState } from "react";
import { BsBook, BsClipboard, BsHeadphones, BsMegaphone, BsPen } from "react-icons/bs";
import ProgressBar from "../../Low/ProgressBar";
import Timer from "../Timer";
import { Exercise, LevelExam } from "@/interfaces/exam";
import useExamStore, { usePersistentExamStore } from "@/stores/exam";
import React from "react";
import MCQuestionGrid from "./MCQuestionGrid";

interface Props {
	minTimer: number;
	module: Module;
	examLabel?: string;
	label?: string;
	exerciseIndex: number;
	totalExercises: number;
	disableTimer?: boolean;
	partLabel?: string;
	showTimer?: boolean;
	showSolutions?: boolean;
	currentExercise?: Exercise;
	runOnClick?: ((questionIndex: number) => void) | undefined;
	indexLabel?: string,
	preview: boolean,
}

export default function ModuleTitle({
	minTimer,
	module,
	label,
	examLabel,
	exerciseIndex,
	totalExercises,
	disableTimer = false,
	partLabel,
	showTimer = true,
	showSolutions = false,
	runOnClick = undefined,
	indexLabel = "Question",
	preview,
}: Props) {
	const examState = useExamStore((state) => state);
	const persistentExamState = usePersistentExamStore((state) => state);
	
	const { exam, partIndex, exerciseIndex: examExerciseIndex, userSolutions } = !preview ? examState : persistentExamState;

	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" />,
	};

	const showGrid = useMemo(() =>
		exam?.module === "level"
		&& exam.parts[partIndex].exercises[examExerciseIndex].type === "multipleChoice"
		&& !!userSolutions,
		[exam, examExerciseIndex, partIndex, userSolutions]
	)

	return (
		<>
			{showTimer && <Timer minTimer={minTimer} disableTimer={disableTimer} />}
			<div className="w-full">
				{partLabel && (
					<div className="text-3xl space-y-4">
						{partLabel.split("\n\n").map((partInstructions, index) => {
							if (index === 0)
								return (
									<p key={index} className="font-bold">
										{partInstructions}
									</p>
								);
							else
								return (
									<div key={index} className="text-2xl font-semibold flex flex-col gap-2">
										{partInstructions.split("\\n").map((line, lineIndex) => (
											<span key={lineIndex} dangerouslySetInnerHTML={{ __html: line.replace('that is not correct', 'that is <span class="font-bold"><u>not correct</u></span>') }}></span>
										))}
									</div>
								);
						})}
					</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">
								{examLabel ? examLabel : (module === "level" ? "Placement Test" : `${moduleLabels[module]} exam${label ? ` - ${label}` : ''}`)}
							</span>
							<span className="text-sm font-semibold self-end">
								{indexLabel} {exerciseIndex}/{totalExercises}
							</span>
						</div>
						<ProgressBar color={module} label="" percentage={(exerciseIndex * 100) / totalExercises} className="h-2 w-full" />
					</div>
					{showGrid && <MCQuestionGrid exam={exam as LevelExam} showSolutions={showSolutions} runOnClick={runOnClick} preview={preview}/>}
				</div>
			</div>
		</>
	);
}
