encoach_frontend/src/components/Exercises/TrueFalse.tsx

import { TrueFalseExercise } from "@/interfaces/exam";
import useExamStore from "@/stores/examStore";
import clsx from "clsx";
import { Fragment, useEffect, useState } from "react";
import { CommonProps } from ".";
import Button from "../Low/Button";

export default function TrueFalse({
	id,
	type,
	prompt,
	questions,
	userSolutions,
	isPractice = false,
	onNext,
	onBack,
	disableProgressButtons = false
}: TrueFalseExercise & CommonProps) {
	const [answers, setAnswers] = useState<{ id: string; solution: "true" | "false" | "not_given" }[]>(userSolutions);

	const hasExamEnded = useExamStore((state) => state.hasExamEnded);
	const setCurrentSolution = useExamStore((state) => state.setCurrentSolution);

	useEffect(() => {
		if (hasExamEnded) onNext({ exercise: id, solutions: answers, score: calculateScore(), type, isPractice });
		// eslint-disable-next-line react-hooks/exhaustive-deps
	}, [hasExamEnded]);

	const calculateScore = () => {
		const total = questions.length || 0;
		const correct = answers.filter(
			(x) =>
				questions
					.find((y) => x.id.toString() === y.id.toString())
					?.solution?.toString()
					.toLowerCase() === x.solution.toLowerCase() || false,
		).length;
		const missing = total - answers.filter((x) => questions.find((y) => x.id.toString() === y.id.toString())).length;

		return { total, correct, missing };
	};

	useEffect(() => {
		setCurrentSolution({ exercise: id, solutions: answers, score: calculateScore(), type, isPractice });
		// eslint-disable-next-line react-hooks/exhaustive-deps
	}, [answers, setAnswers]);

	const toggleAnswer = (solution: "true" | "false" | "not_given", questionId: string) => {
		const answer = answers.find((x) => x.id === questionId);
		if (answer && answer.solution === solution) {
			setAnswers((prev) => prev.filter((x) => x.id !== questionId));
			return;
		}

		setAnswers((prev) => [...prev.filter((x) => x.id !== questionId), { id: questionId, solution }]);
	};

	useEffect(() => {
		if (disableProgressButtons) onNext({ exercise: id, solutions: answers, score: calculateScore(), type, isPractice });
		// eslint-disable-next-line react-hooks/exhaustive-deps
	}, [answers, disableProgressButtons])

	const progressButtons = () => (
		<div className="flex justify-between w-full gap-8">
			<Button
				color="purple"
				variant="outline"
				onClick={() => onBack({ exercise: id, solutions: answers, score: calculateScore(), type, isPractice })}
				className="max-w-[200px] w-full">
				Back
			</Button>

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

	return (
		<div className="flex flex-col gap-4 mt-4">
			{!disableProgressButtons && progressButtons()}

			<div className={clsx("flex flex-col gap-4 mt-4 h-full w-full", !disableProgressButtons && "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 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={answers.find((x) => x.id.toString() === id)?.solution === "true" ? "solid" : "outline"}
										onClick={() => toggleAnswer("true", id)}
										className="!py-2">
										True
									</Button>
									<Button
										variant={answers.find((x) => x.id.toString() === id)?.solution === "false" ? "solid" : "outline"}
										onClick={() => toggleAnswer("false", id)}
										className="!py-2">
										False
									</Button>
									<Button
										variant={answers.find((x) => x.id.toString() === id)?.solution === "not_given" ? "solid" : "outline"}
										onClick={() => toggleAnswer("not_given", id)}
										className="!py-2">
										Not Given
									</Button>
								</div>
							</div>
						);
					})}
				</div>
			</div>

			{!disableProgressButtons && progressButtons()}
		</div>
	);
}