encoach_frontend/src/components/Exercises/MultipleChoice.tsx

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

function Question({
	id,
	variant,
	prompt,
	options,
	userSolution,
	onSelectOption,
}: MultipleChoiceQuestion & {userSolution: string | undefined; onSelectOption?: (option: string) => void; showSolution?: boolean}) {
	const renderPrompt = (prompt: string) => {
		return reactStringReplace(prompt, /((<u>)\w+(<\/u>))/g, (match) => {
			const word = match.replaceAll("<u>", "").replaceAll("</u>", "");
			return word.length > 0 ? <u>{word}</u> : null;
		});
	};

	return (
		<div className="flex flex-col gap-10">
			{isNaN(Number(id)) ? (
				<span>{renderPrompt(prompt).filter((x) => x?.toString() !== "<u>")} </span>
			) : (
				<span className="">
					<>
						{id} - <span>{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.toString()}
							onClick={() => (onSelectOption ? onSelectOption(option.id.toString()) : null)}
							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",
								userSolution === option.id.toString() && "border-mti-purple-light",
							)}>
							<span className={clsx("text-sm", userSolution !== option.id.toString() && "opacity-50")}>{option.id.toString()}</span>
							<img src={option.src!} alt={`Option ${option.id.toString()}`} />
						</div>
					))}
				{variant === "text" &&
					options.map((option) => (
						<div
							key={option.id.toString()}
							onClick={() => (onSelectOption ? onSelectOption(option.id.toString()) : null)}
							className={clsx(
								"flex border p-4 rounded-xl gap-2 cursor-pointer bg-white text-sm",
								userSolution === option.id.toString() && "border-mti-purple-light",
							)}>
							<span className="font-semibold">{option.id.toString()}.</span>
							<span>{option.text}</span>
						</div>
					))}
			</div>
		</div>
	);
}

export default function MultipleChoice({id, prompt, type, questions, userSolutions, onNext, onBack}: MultipleChoiceExercise & CommonProps) {
	const [answers, setAnswers] = useState<{question: string; option: string}[]>(userSolutions);

	const {questionIndex, setQuestionIndex} = useExamStore((state) => state);
	const {userSolutions: storeUserSolutions, setUserSolutions} = useExamStore((state) => state);
	const hasExamEnded = useExamStore((state) => state.hasExamEnded);

	const scrollToTop = () => Array.from(document.getElementsByTagName("body")).forEach((body) => body.scrollTo(0, 0));

	useEffect(() => {
		setUserSolutions([...storeUserSolutions.filter((x) => x.exercise !== id), {exercise: id, solutions: answers, score: calculateScore(), type}]);
		// eslint-disable-next-line react-hooks/exhaustive-deps
	}, [answers]);

	useEffect(() => {
		if (hasExamEnded) onNext({exercise: id, solutions: answers, score: calculateScore(), type});
		// eslint-disable-next-line react-hooks/exhaustive-deps
	}, [hasExamEnded]);

	const onSelectOption = (option: string) => {
		const question = questions[questionIndex];
		setAnswers((prev) => [...prev.filter((x) => x.question !== question.id), {option, question: question.id}]);
	};

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

		return {total, correct, missing};
	};

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

		scrollToTop();
	};

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

		scrollToTop();
	};

	return (
		<>
			<div className="flex flex-col gap-2 mt-4 h-fit w-full mb-20 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={answers.find((x) => questions[questionIndex].id === x.question)?.option}
						onSelectOption={onSelectOption}
					/>
				)}
			</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>
		</>
	);
}