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, text, userSolutions, onNext, onBack}: FillBlanksExercise & CommonProps) {
	const calculateScore = () => {
		const total = text.match(/({{\d+}})/g)?.length || 0;
		const correct = userSolutions.filter((x) => solutions.find((y) => x.id === y.id)?.solution === x.solution.toLowerCase() || false).length;
		const missing = total - userSolutions.filter((x) => solutions.find((y) => x.id === y.id)).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-red transition duration-300 ease-in-out my-1 px-5 py-2 text-center text-white bg-mti-red-light",
								)}>
								{solution.solution}
							</button>
						);
					}

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