encoach_frontend/src/components/Solutions/MultipleChoice.tsx

/* eslint-disable @next/next/no-img-element */
import {MultipleChoiceExercise, MultipleChoiceQuestion} from "@/interfaces/exam";
import clsx from "clsx";
import {useState} from "react";
import {CommonProps} from ".";
import Button from "../Low/Button";

function Question({
	variant,
	prompt,
	solution,
	options,
	userSolution,
}: MultipleChoiceQuestion & {userSolution: string | undefined; onSelectOption?: (option: string) => void; showSolution?: boolean}) {
	const optionColor = (option: string) => {
		if (option === solution && !userSolution) {
			return "!border-mti-red-light !text-mti-red-light";
		}

		if (option === solution) {
			return "!border-mti-purple-light !text-mti-purple-light";
		}

		return userSolution === option ? "!border-mti-rose-light !text-mti-rose-light" : "";
	};

	return (
		<div className="flex flex-col items-center gap-4">
			<span>{prompt}</span>
			<div className="grid grid-cols-4 gap-4 place-items-center">
				{variant === "image" &&
					options.map((option) => (
						<div
							key={option.id}
							className={clsx(
								"flex flex-col items-center border border-mti-gray-platinum p-4 px-8 rounded-xl gap-4 cursor-pointer bg-white relative",
								optionColor(option.id),
							)}>
							<span className={clsx("text-sm", solution !== option.id && userSolution !== option.id && "opacity-50")}>{option.id}</span>
							<img src={option.src!} alt={`Option ${option.id}`} />
						</div>
					))}
				{variant === "text" &&
					options.map((option) => (
						<div
							key={option.id}
							className={clsx("flex border p-4 rounded-xl gap-2 cursor-pointer bg-white text-sm", optionColor(option.id))}>
							<span className="font-semibold">{option.id}.</span>
							<span>{option.text}</span>
						</div>
					))}
			</div>
		</div>
	);
}

export default function MultipleChoice({id, type, prompt, questions, userSolutions, onNext, onBack}: MultipleChoiceExercise & CommonProps) {
	const [questionIndex, setQuestionIndex] = useState(0);

	const calculateScore = () => {
		const total = questions.length;
		const correct = userSolutions.filter((x) => questions.find((y) => y.id === x.question)?.solution === x.option || false).length;
		const missing = total - userSolutions.filter((x) => questions.find((y) => y.id === x.question)).length;

		return {total, correct, missing};
	};

	const next = () => {
		if (questionIndex === questions.length - 1) {
			onNext({exercise: id, solutions: userSolutions, score: calculateScore(), type});
		} else {
			setQuestionIndex((prev) => prev + 1);
		}
	};

	const back = () => {
		if (questionIndex === 0) {
			onBack({exercise: id, solutions: userSolutions, score: calculateScore(), type});
		} else {
			setQuestionIndex((prev) => prev - 1);
		}
	};

	return (
		<>
			<div className="flex flex-col gap-4 w-full h-full mb-20">
				<div className="flex flex-col gap-2 mt-4 h-full bg-mti-gray-smoke rounded-xl px-16 py-8">
					<span className="text-xl font-semibold">{prompt}</span>
					{questionIndex < questions.length && (
						<Question
							{...questions[questionIndex]}
							userSolution={userSolutions.find((x) => questions[questionIndex].id === x.question)?.option}
						/>
					)}
				</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-red" />
						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={back} className="max-w-[200px] w-full">
					Back
				</Button>

				<Button color="purple" onClick={next} className="max-w-[200px] self-end w-full">
					Next
				</Button>
			</div>
		</>
	);
}