import {MatchSentencesExercise} from "@/interfaces/exam";
import clsx from "clsx";
import LineTo from "react-lineto";
import {CommonProps} from ".";
import {errorButtonStyle, infoButtonStyle} from "@/constants/buttonStyles";
import {mdiArrowLeft, mdiArrowRight} from "@mdi/js";
import Icon from "@mdi/react";
import {Fragment} from "react";
import Button from "../Low/Button";
import Xarrow from "react-xarrows";

export default function MatchSentencesSolutions({
	id,
	type,
	options,
	prompt,
	sentences,
	userSolutions,
	onNext,
	onBack,
}: MatchSentencesExercise & CommonProps) {
	const calculateScore = () => {
		const total = sentences.length;
		const correct = userSolutions.filter(
			(x) => sentences.find((y) => y.id.toString() === x.question.toString())?.solution === x.option || false,
		).length;
		const missing = total - userSolutions.filter((x) => sentences.find((y) => y.id.toString() === x.question.toString())).length;

		return {total, correct, missing};
	};

	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 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(({sentence, id, solution}) => (
							<div key={`question_${id}`} className="flex items-center justify-end gap-2 cursor-pointer">
								<span>{sentence} </span>
								<button
									id={id}
									className={clsx(
										"w-8 h-8 rounded-full z-10 text-white",
										"transition duration-300 ease-in-out",
										!userSolutions.find((x) => x.question.toString() === id.toString()) && "!bg-mti-gray-davy",
										userSolutions.find((x) => x.question.toString() === id.toString())?.option === solution && "bg-mti-purple",
										userSolutions.find((x) => x.question.toString() === id.toString())?.option !== solution && "bg-mti-rose",
									)}>
									{id}
								</button>
							</div>
						))}
					</div>
					<div className="flex flex-col gap-4">
						{options.map(({sentence, id}) => (
							<div key={`answer_${id}`} className={clsx("flex items-center justify-start gap-2 cursor-pointer")}>
								<button
									id={id}
									className={clsx(
										"bg-mti-purple-ultralight text-mti-purple hover:text-white hover:bg-mti-purple w-8 h-8 rounded-full z-10",
										"transition duration-300 ease-in-out",
									)}>
									{id}
								</button>
								<span>{sentence}</span>
							</div>
						))}
					</div>
					{userSolutions &&
						sentences.map((sentence, index) => (
							<Xarrow
								key={index}
								start={sentence.id}
								end={sentence.solution}
								lineColor={
									!userSolutions.find((x) => x.question === sentence.id)
										? "#CC5454"
										: userSolutions.find((x) => x.question === sentence.id)?.option === sentence.solution
										? "#7872BF"
										: "#CC5454"
								}
								showHead={false}
							/>
						))}
				</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>
			</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: userSolutions, score: calculateScore(), type})}
					className="max-w-[200px] w-full">
					Back
				</Button>

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