encoach_frontend/src/components/Exercises/TrueFalse.tsx

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

export default function TrueFalse({id, type, prompt, questions, userSolutions, onNext, onBack}: 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});
		// 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});
		// 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}]);
	};

	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: answers, score: calculateScore(), type})}
					className="max-w-[200px] w-full">
					Back
				</Button>

				<Button
					color="purple"
					onClick={() => onNext({exercise: id, solutions: answers, 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">
					{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>

			<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: answers, score: calculateScore(), type})}
					className="max-w-[200px] w-full">
					Back
				</Button>

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