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";
import useExamStore from "@/stores/examStore";

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

export default function TrueFalseSolution({prompt, type, id, questions, userSolutions, onNext, onBack}: TrueFalseExercise & CommonProps) {
	const {questionIndex, setQuestionIndex, partIndex, exam} = useExamStore((state) => state);

	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 "gray";
	};

	return (
		<div className="flex flex-col gap-4 mt-4">
			<div className="flex justify-between w-full gap-8">
				<Button
					color="purple"
					variant="outline"
					onClick={() => onBack({exercise: id, solutions: userSolutions, score: calculateScore(), type})}
					className="max-w-[200px] w-full"
					disabled={exam && typeof partIndex !== "undefined" && exam.module === "level" && questionIndex === 0 && partIndex === 0}>
					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>

			<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>
				<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">
					{userSolutions &&
						questions.map((question, index) => {
							const userSolution = userSolutions.find((x) => x.id === question.id.toString());
							const solution = question.solution.toString().toLowerCase() as Solution;

							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={solution === "true" || userSolution?.solution.toLowerCase() === "true" ? "solid" : "outline"}
											className="!py-2"
											color={getButtonColor("true", solution, userSolution?.solution.toLowerCase() as Solution)}>
											True
										</Button>
										<Button
											variant={solution === "false" || userSolution?.solution.toLowerCase() === "false" ? "solid" : "outline"}
											className="!py-2"
											color={getButtonColor("false", solution, userSolution?.solution.toLowerCase() as Solution)}>
											False
										</Button>
										<Button
											variant={
												solution === "not_given" || userSolution?.solution.toLowerCase() === "not_given" ? "solid" : "outline"
											}
											className="!py-2"
											color={getButtonColor("not_given", solution, userSolution?.solution.toLowerCase() as 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-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"
					disabled={exam && typeof partIndex !== "undefined" && exam.module === "level" && questionIndex === 0 && partIndex === 0}>
					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>
		</div>
	);
}