import { FillBlanksExercise, FillBlanksMCOption, ShuffleMap } from "@/interfaces/exam";
import clsx from "clsx";
import reactStringReplace from "react-string-replace";
import { CommonProps } from ".";
import useExamStore from "@/stores/exam";
import { typeCheckWordsMC } from "@/utils/type.check";

const FillBlanksSolutions: React.FC<FillBlanksExercise & CommonProps> = ({ id, solutions, words, text, headerButtons, footerButtons}) => {
	const {userSolutions, shuffles} = useExamStore();
	const correctUserSolutions = userSolutions.find((solution) => solution.exercise === id)?.solutions;

	const renderLines = (line: string) => {
		return (
			<span>
				{reactStringReplace(line, /({{\d+}})/g, (match) => {
					const questionId = match.replaceAll(/[\{\}]/g, "");
					const userSolution = correctUserSolutions!.find((x) => x.id.toString() === questionId.toString());
					const answerSolution = solutions.find((sol) => sol.id.toString() === questionId.toString())!.solution;
					const questionShuffleMap = shuffles.find((x) => x.exerciseID == id)?.shuffles.find((y) => y.questionID == questionId);
					const newAnswerSolution = questionShuffleMap
						? questionShuffleMap.map[answerSolution].toLowerCase()
						: answerSolution.toLowerCase();

					if (!userSolution) {
						let answerText;
						if (typeCheckWordsMC(words)) {
							const options = words.find((x) => x.id.toString() === questionId.toString());
							const correctKey = Object.keys(options!.options).find((key) => key.toLowerCase() === newAnswerSolution);
							answerText = options!.options[correctKey as keyof typeof options];
						} else {
							answerText = answerSolution;
						}

						return (
							<button
								className={clsx(
									"rounded-full hover:text-white hover:bg-mti-gray-davy transition duration-300 ease-in-out my-1 px-5 py-2 text-center text-white bg-mti-gray-davy",
								)}>
								{answerText}
							</button>
						);
					}

					const userSolutionWord = words.find((w) =>
						typeof w === "string"
							? w.toLowerCase() === userSolution.solution.toLowerCase()
							: "letter" in w
								? w.letter.toLowerCase() === userSolution.solution.toLowerCase()
								: "options" in w
									? w.id === userSolution.questionId
									: false,
					);

					const userSolutionText =
						typeof userSolutionWord === "string"
							? userSolutionWord
							: userSolutionWord && "letter" in userSolutionWord
								? userSolutionWord.word
								: userSolutionWord && "options" in userSolutionWord
									? userSolution.solution
									: userSolution.solution;

					let correct;
					let solutionText;
					if (typeCheckWordsMC(words)) {
						const options = words.find((x) => x.id.toString() === questionId.toString());
						if (options) {
							const correctKey = Object.keys(options.options).find((key) => key.toLowerCase() === newAnswerSolution);
							correct = userSolution.solution == options.options[correctKey as keyof typeof options.options];
							solutionText = options.options[correctKey as keyof typeof options.options] || answerSolution;
						} else {
							correct = false;
							solutionText = answerSolution;
						}
					} else {
						correct = userSolutionText === answerSolution;
						solutionText = answerSolution;
					}

					if (correct) {
						return (
							<button
								className={clsx(
									"rounded-full hover:text-white hover:bg-mti-purple transition duration-300 ease-in-out my-1",
									userSolution && "px-5 py-2 text-center text-white bg-mti-purple-light",
								)}>
								{solutionText}
							</button>
						);
					} else {
						return (
							<>
								<button
									className={clsx(
										"rounded-full hover:text-white hover:bg-mti-rose transition duration-300 ease-in-out my-1 mr-1",
										userSolution && "px-5 py-2 text-center text-white bg-mti-rose-light",
									)}>
									{userSolutionText}
								</button>

								<button
									className={clsx(
										"rounded-full hover:text-white hover:bg-mti-purple transition duration-300 ease-in-out my-1",
										userSolution && "px-5 py-2 text-center text-white bg-mti-purple-light",
									)}>
									{solutionText}
								</button>
							</>
						);
					}
				})}
			</span>
		);
	};

	return (
		<div className="flex flex-col gap-4">
			{headerButtons}
			<div className={clsx("flex flex-col gap-4 mt-4 h-full w-full", (headerButtons && footerButtons) && "mb-20")}>
				<span className="bg-mti-gray-smoke rounded-xl px-5 py-6">
					{correctUserSolutions &&
						text.split("\\n").map((line, index) => (
							<p key={index}>
								{renderLines(line)}
								<br />
							</p>
						))}
				</span>
				<div className="flex gap-4 items-center">
					<div className="flex gap-2 items-center">
						<div className="w-4 h-4 rounded-full bg-mti-purple" />
						Correct
					</div>
					<div className="flex gap-2 items-center">
						<div className="w-4 h-4 rounded-full bg-mti-gray-davy" />
						Unanswered
					</div>
					<div className="flex gap-2 items-center">
						<div className="w-4 h-4 rounded-full bg-mti-rose" />
						Wrong
					</div>
				</div>
				{footerButtons}
			</div>
		</div>
	);
}

export default FillBlanksSolutions;
