encoach_frontend/src/components/Solutions/TrueFalse.tsx

import {FillBlanksExercise, TrueFalseExercise} 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";

type Solution = "true" | "false" | "not_given";

export default function TrueFalseSolution({prompt, type, id, questions, userSolutions, onNext, onBack}: TrueFalseExercise & CommonProps) {
	const calculateScore = () => {
		const total = questions.length || 0;
		const correct = userSolutions.filter(
			(x) => questions.find((y) => x.id.toString() === y.id.toString())?.solution === x.solution.toLowerCase() || false,
		).length;
		const missing = total - userSolutions.filter((x) => questions.find((y) => x.id.toString() === y.id.toString())).length;

		return {total, correct, missing};
	};

	const getButtonColor = (buttonSolution: Solution, solution: Solution, userSolution: Solution | undefined) => {
		if (buttonSolution !== userSolution && buttonSolution !== solution) return "purple";

		if (userSolution) {
			if (userSolution === buttonSolution && solution === buttonSolution) {
				return "purple";
			}

			if (solution === buttonSolution) {
				return "purple";
			}

			return "rose";
		}

		return "red";
	};

	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>
				<div className="flex flex-col gap-6 mb-4">
					<p>For each of the questions below, select</p>
					<div className="pl-8 flex gap-8">
						<span className="flex flex-col gap-4">
							<span className="font-bold italic">TRUE</span>
							<span className="font-bold italic">FALSE</span>
							<span className="font-bold italic">NOT GIVEN</span>
						</span>
						<span className="flex flex-col gap-4">
							<span>if the statement agrees with the information</span>
							<span>if the statement contradicts with the information</span>
							<span>if there is no information on this</span>
						</span>
					</div>
				</div>
				<span className="text-sm w-full leading-6">You can click a selected option again to deselect it.</span>
				<div className="bg-mti-gray-smoke rounded-xl px-5 py-6 flex flex-col gap-8">
					{questions.map((question, index) => {
						const userSolution = userSolutions.find((x) => x.id === question.id.toString());

						return (
							<div key={question.id.toString()} className="flex flex-col gap-4">
								<span>
									{index + 1}. {question.prompt}
								</span>
								<div className="flex gap-4">
									<Button
										variant={question.solution === "true" || userSolution?.solution === "true" ? "solid" : "outline"}
										className="!py-2"
										color={getButtonColor("true", question.solution, userSolution?.solution)}>
										True
									</Button>
									<Button
										variant={question.solution === "false" || userSolution?.solution === "false" ? "solid" : "outline"}
										className="!py-2"
										color={getButtonColor("false", question.solution, userSolution?.solution)}>
										False
									</Button>
									<Button
										variant={question.solution === "not_given" || userSolution?.solution === "not_given" ? "solid" : "outline"}
										className="!py-2"
										color={getButtonColor("not_given", question.solution, userSolution?.solution)}>
										Not Given
									</Button>
								</div>
							</div>
						);
					})}
				</div>
				<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>
		</>
	);
}