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

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

export default function TrueFalseSolution({ prompt, type, id, questions, userSolutions, headerButtons, footerButtons }: TrueFalseExercise & CommonProps) {
	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">
			{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>
				<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>
				{footerButtons}
			</div>
		</div>
	);
}