encoach_frontend/src/components/Solutions/FillBlanks.tsx

import {FillBlanksExercise} from "@/interfaces/exam";
import clsx from "clsx";
import reactStringReplace from "react-string-replace";
import {CommonProps} from ".";
import {Fragment} from "react";
import Button from "../Low/Button";

export default function FillBlanksSolutions({
	id,
	type,
	prompt,
	solutions,
	words,
	text,
	userSolutions,
	onNext,
	onBack,
}: FillBlanksExercise & CommonProps) {
	const calculateScore = () => {
		const total = text.match(/({{\d+}})/g)?.length || 0;
		const correct = userSolutions.filter((x) => {
			const solution = solutions.find((y) => x.id.toString() === y.id.toString())?.solution.toLowerCase();
			if (!solution) return false;

			const option = words.find((w) =>
				typeof w === "string" ? w.toLowerCase() === x.solution.toLowerCase() : w.letter.toLowerCase() === x.solution.toLowerCase(),
			);
			if (!option) return false;

			return solution === (typeof option === "string" ? option.toLowerCase() : option.word.toLowerCase());
		}).length;
		const missing = total - userSolutions.filter((x) => solutions.find((y) => x.id.toString() === y.id.toString())).length;

		return {total, correct, missing};
	};

	const renderLines = (line: string) => {
		return (
			<span>
				{reactStringReplace(line, /({{\d+}})/g, (match) => {
					const id = match.replaceAll(/[\{\}]/g, "");
					const userSolution = userSolutions.find((x) => x.id === id);
					const solution = solutions.find((x) => x.id === id)!;

					if (!userSolution) {
						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",
								)}>
								{solution?.solution}
							</button>
						);
					}

					const userSolutionWord = words.find((w) =>
						typeof w === "string"
							? w.toLowerCase() === userSolution.solution.toLowerCase()
							: w.letter.toLowerCase() === userSolution.solution.toLowerCase(),
					);
					const userSolutionText = typeof userSolutionWord === "string" ? userSolutionWord : userSolutionWord?.word;

					if (userSolutionText === solution.solution) {
						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",
								)}>
								{solution.solution}
							</button>
						);
					}

					if (userSolutionText !== solution.solution) {
						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",
									)}>
									{solution.solution}
								</button>
							</>
						);
					}
				})}
			</span>
		);
	};

	return (
		<>
			<div className="flex flex-col gap-4 mt-4 h-full w-full mb-20">
				<span className="text-sm w-full leading-6">
					{prompt.split("\\n").map((line, index) => (
						<Fragment key={index}>
							{line}
							<br />
						</Fragment>
					))}
				</span>
				<span className="bg-mti-gray-smoke rounded-xl px-5 py-6">
					{userSolutions &&
						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>
			</div>

			<div className="self-end flex justify-between w-full gap-8 absolute bottom-8 left-0 px-8">
				<Button
					color="purple"
					variant="outline"
					onClick={() => onBack({exercise: id, solutions: userSolutions, score: calculateScore(), type})}
					className="max-w-[200px] w-full">
					Back
				</Button>

				<Button
					color="purple"
					onClick={() => onNext({exercise: id, solutions: userSolutions, score: calculateScore(), type})}
					className="max-w-[200px] self-end w-full">
					Next
				</Button>
			</div>
		</>
	);
}