encoach_frontend/src/components/Solutions/MultipleChoice.tsx

/* eslint-disable @next/next/no-img-element */
import {errorButtonStyle, infoButtonStyle} from "@/constants/buttonStyles";
import {MultipleChoiceExercise, MultipleChoiceQuestion} from "@/interfaces/exam";
import {mdiArrowLeft, mdiArrowRight, mdiCheck, mdiClose} from "@mdi/js";
import Icon from "@mdi/react";
import clsx from "clsx";
import {useState} from "react";
import {CommonProps} from ".";

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

		if (option === solution) {
			return "border-green-500 text-green-500";
		}

		return userSolution === option ? "border-red-500 text-red-500" : "";
	};

	const optionBadge = (option: string) => {
		if (option === userSolution) {
			if (solution === option) {
				return (
					<div className="badge badge-lg bg-green-500 border-green-500 absolute -top-2 -right-4">
						<div className="tooltip" data-tip="You have correctly answered!">
							<Icon path={mdiCheck} color="white" size={0.8} />
						</div>
					</div>
				);
			}

			return (
				<div className="badge badge-lg bg-red-500 border-red-500 absolute -top-2 -right-4">
					<div className="tooltip" data-tip="You have wrongly answered!">
						<Icon path={mdiClose} color="white" size={0.8} />
					</div>
				</div>
			);
		}
	};

	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}
							onClick={() => (onSelectOption ? onSelectOption(option.id) : null)}
							className={clsx(
								"flex flex-col items-center border-2 p-4 rounded-xl gap-4 cursor-pointer bg-white relative",
								optionColor(option.id),
							)}>
							{showSolution && optionBadge(option.id)}
							<img src={option.src!} alt={`Option ${option.id}`} />
							<span>{option.id}</span>
						</div>
					))}
				{variant === "text" &&
					options.map((option) => (
						<div
							key={option.id}
							onClick={() => (onSelectOption ? onSelectOption(option.id) : null)}
							className={clsx("flex border-2 p-4 rounded-xl gap-2 cursor-pointer bg-white", optionColor(option.id))}>
							{showSolution && optionBadge(option.id)}
							<span className="font-bold">{option.id}.</span>
							<span>{option.text}</span>
						</div>
					))}
			</div>
		</div>
	);
}

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

	const next = () => {
		if (questionIndex === questions.length - 1) {
			onNext();
		} else {
			setQuestionIndex((prev) => prev + 1);
		}
	};

	const back = () => {
		if (questionIndex === 0) {
			onBack();
		} else {
			setQuestionIndex((prev) => prev - 1);
		}
	};

	return (
		<>
			<div className="flex flex-col items-center gap-4">
				<span className="text-base md:text-lg font-medium text-center px-2 md:px-4 lg:px-48">{prompt}</span>
				{questionIndex < questions.length && (
					<Question
						{...questions[questionIndex]}
						userSolution={userSolutions.find((x) => questions[questionIndex].id === x.question)?.option}
						showSolution
					/>
				)}
			</div>

			<div className="self-end flex flex-col-reverse items-center w-full md:justify-between md:items-start md:flex-row gap-8">
				<button className={clsx("btn btn-wide gap-4 relative text-white", errorButtonStyle)} onClick={back}>
					<div className="absolute left-4">
						<Icon path={mdiArrowLeft} color="white" size={1} />
					</div>
					Back
				</button>
				<button className={clsx("btn btn-wide gap-4 relative text-white", infoButtonStyle)} onClick={next}>
					Next
					<div className="absolute right-4">
						<Icon path={mdiArrowRight} color="white" size={1} />
					</div>
				</button>
			</div>
		</>
	);
}