encoach_frontend/src/components/Solutions/MultipleChoice.tsx

/* eslint-disable @next/next/no-img-element */
import {MultipleChoiceExercise, MultipleChoiceQuestion, ShuffleMap} from "@/interfaces/exam";
import useExamStore from "@/stores/examStore";
import clsx from "clsx";
import reactStringReplace from "react-string-replace";
import {CommonProps} from ".";
import Button from "../Low/Button";
import {v4} from "uuid";

function Question({
	id,
	variant,
	prompt,
	solution,
	options,
	userSolution,
}: MultipleChoiceQuestion & {userSolution: string | undefined; onSelectOption?: (option: string) => void; showSolution?: boolean}) {
	const {userSolutions} = useExamStore((state) => state);

	const questionShuffleMap = userSolutions.reduce((foundMap, userSolution) => {
		if (foundMap) return foundMap;
		return userSolution.shuffleMaps?.find((map) => map.questionID === id) || null;
	}, null as ShuffleMap | null);

	const newSolution = questionShuffleMap ? questionShuffleMap?.map[solution] : solution;

	const renderPrompt = (prompt: string) => {
		return reactStringReplace(prompt, /(<u>.*?<\/u>)/g, (match) => {
			const word = match.replaceAll("<u>", "").replaceAll("</u>", "");
			return word.length > 0 ? <u>{word}</u> : null;
		});
	};

	const optionColor = (option: string) => {
		if (option === newSolution && !userSolution) {
			return "!bg-mti-gray-davy !text-white";
		}

		if (option === newSolution) {
			return "!bg-mti-purple-light !text-white";
		}

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

	return (
		<div className="flex flex-col gap-4">
			{isNaN(Number(id)) ? (
				<span>{renderPrompt(prompt).filter((x) => x?.toString() !== "<u>")} </span>
			) : (
				<span className="text-lg" key={v4()}>
					<>
						{id} -{" "}
						<span className="text-lg" key={v4()}>
							{renderPrompt(prompt).filter((x) => x?.toString() !== "<u>")}{" "}
						</span>
					</>
				</span>
			)}
			<div className="flex flex-wrap gap-4 justify-between">
				{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 select-none",
								optionColor(option!.id),
							)}>
							<span className={clsx("text-sm", newSolution !== option?.id && userSolution !== option?.id && "opacity-50")}>
								{option?.id}
							</span>
							{"src" in option && <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-base select-none",
								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, partIndex, exam} = useExamStore((state) => state);

	const stats = useExamStore((state) => state.userSolutions);

	const calculateScore = () => {
		const total = questions.length;
		const questionShuffleMap = stats.find((x) => x.exercise == id)?.shuffleMaps;
		const correct = userSolutions.filter((x) => {
			if (questionShuffleMap) {
				const shuffleMap = questionShuffleMap.find((y) => y.questionID === x.question);
				const originalSol = questions.find((y) => y.id.toString() === x.question.toString())?.solution!;
				return x.option == shuffleMap?.map[originalSol];
			} else {
				return questions.find((y) => y.id.toString() === x.question.toString())?.solution === x.option || false;
			}
		}).length;
		const missing = total - userSolutions.filter((x) => questions.find((y) => y.id.toString() === x.question.toString())).length;
		return {total, correct, missing};
	};

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

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

	return (
		<div className="flex flex-col gap-4">
			<div className="flex justify-between w-full gap-8">
				<Button
					color="purple"
					variant="outline"
					onClick={back}
					className="max-w-[200px] w-full"
					disabled={exam && typeof partIndex !== "undefined" && exam.module === "level" && questionIndex === 0 && partIndex === 0}>
					Back
				</Button>

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

			<div className="flex flex-col gap-4 w-full h-full mb-20 mt-4">
				<div className="flex flex-col gap-4 mt-2">
					<div className="flex flex-col gap-8 h-fit w-full bg-mti-gray-smoke rounded-xl px-16 py-8">
						{/*<span className="text-xl font-semibold">{prompt}</span>*/}
						{userSolutions && questionIndex < questions.length && (
							<Question
								{...questions[questionIndex]}
								userSolution={userSolutions.find((x) => questions[questionIndex].id === x.question)?.option}
							/>
						)}
					</div>

					{userSolutions && questionIndex + 1 < questions.length && (
						<div className="flex flex-col gap-8 h-fit w-full bg-mti-gray-smoke rounded-xl px-16 py-8">
							<Question
								{...questions[questionIndex + 1]}
								userSolution={userSolutions.find((x) => questions[questionIndex + 1].id === x.question)?.option}
							/>
						</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>
			</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"
					disabled={exam && typeof partIndex !== "undefined" && exam.module === "level" && questionIndex === 0 && partIndex === 0}>
					Back
				</Button>

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