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);

	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 === y.id.toString())?.solution === x.solution.toLowerCase() || false).length;
		const missing = total - answers.filter((x) => questions.find((y) => x.id === y.id.toString())).length;

		return {total, correct, missing};
	};

	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 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) => (
						<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 === question.id.toString())?.solution === "true" ? "solid" : "outline"}
									onClick={() => toggleAnswer("true", question.id.toString())}
									className="!py-2">
									True
								</Button>
								<Button
									variant={answers.find((x) => x.id === question.id.toString())?.solution === "false" ? "solid" : "outline"}
									onClick={() => toggleAnswer("false", question.id.toString())}
									className="!py-2">
									False
								</Button>
								<Button
									variant={answers.find((x) => x.id === question.id.toString())?.solution === "not_given" ? "solid" : "outline"}
									onClick={() => toggleAnswer("not_given", question.id.toString())}
									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>
		</>
	);
}