import { TrueFalseExercise } from "@/interfaces/exam";
import clsx from "clsx";
import { Fragment, useCallback, useEffect, useState } from "react";
import { CommonProps } from "./types";
import Button from "../Low/Button";
import PracticeBadge from "../Low/PracticeBadge";

const TrueFalse: React.FC<TrueFalseExercise & CommonProps> = ({
	id,
	type,
	prompt,
	questions,
	userSolutions,
	isPractice = false,
	registerSolution,
	headerButtons,
	footerButtons,
}) => {
	const [answers, setAnswers] = useState<{ id: string; solution: "true" | "false" | "not_given" }[]>(userSolutions);

	const calculateScore = useCallback(() => {
		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 };
	}, [answers, questions]);

	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(() => {
		registerSolution(() => ({
			exercise: id,
			solutions: answers,
			score: calculateScore(),
			type,
			isPractice
		}));
		// eslint-disable-next-line react-hooks/exhaustive-deps
	}, [id, answers, type, isPractice, calculateScore]);

	return (
		<div className="flex flex-col gap-4 mt-4">
			{headerButtons}
			<div className={clsx("flex flex-col gap-4 mt-4 h-full w-full", (headerButtons && footerButtons) && "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>
				{isPractice && <PracticeBadge className="w-fit self-end" />}
				<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>
				{footerButtons}
			</div>
			
		</div>
	);
}

export default TrueFalse;