import { MatchSentenceExerciseSentence, MatchSentencesExercise } from "@/interfaces/exam";
import clsx from "clsx";
import { CommonProps } from ".";
import { Fragment } from "react";

function QuestionSolutionArea({
	question,
	userSolution,
}: {
	question: MatchSentenceExerciseSentence;
	userSolution?: { question: string; option: string };
}) {
	return (
		<div className="grid grid-cols-3 gap-4">
			<div className="flex items-center gap-3 cursor-pointer col-span-2">
				<button
					className={clsx(
						"text-white p-2 rounded-full z-10",
						!userSolution
							? "bg-mti-gray-davy"
							: userSolution.option.toString() === question.solution.toString()
								? "bg-mti-purple"
								: "bg-mti-rose",
						"transition duration-300 ease-in-out",
					)}>
					{question.id}
				</button>
				<span>{question.sentence}</span>
			</div>
			<div
				className={clsx(
					"w-56 h-10 border self-center rounded-xl items-center justify-center flex gap-3 px-2",
					!userSolution
						? "border-mti-gray-davy"
						: userSolution.option.toString() === question.solution.toString()
							? "border-mti-purple"
							: "border-mti-rose",
				)}>
				<span className="line-through">
					{userSolution && userSolution?.option.toString() !== question.solution.toString() && `Paragraph ${userSolution.option}`}
				</span>
				<span className="font-semibold">Paragraph {question.solution}</span>
			</div>
		</div>
	);
}

export default function MatchSentencesSolutions({
	id,
	type,
	prompt,
	sentences,
	userSolutions,
	headerButtons,
	footerButtons,
}: MatchSentencesExercise & CommonProps) {
	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-8 w-full items-center justify-between bg-mti-gray-smoke rounded-xl px-24 py-6">
					<div className="flex flex-col gap-4">
						{sentences.map((question) => (
							<QuestionSolutionArea
								question={question}
								userSolution={userSolutions.find((x) => x.question.toString() === question.id.toString())}
								key={`question_${question.id}`}
							/>
						))}
					</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>
	);
}