encoach_frontend/src/components/Solutions/WriteBlanks.tsx

import {errorButtonStyle, infoButtonStyle} from "@/constants/buttonStyles";
import {WriteBlanksExercise} from "@/interfaces/exam";
import {mdiArrowLeft, mdiArrowRight} from "@mdi/js";
import Icon from "@mdi/react";
import clsx from "clsx";
import {Fragment, useEffect, useState} from "react";
import reactStringReplace from "react-string-replace";
import {CommonProps} from ".";
import {toast} from "react-toastify";
import Button from "../Low/Button";

function Blank({
	id,
	maxWords,
	solutions,
	userSolution,
	disabled = false,
	setUserSolution,
}: {
	id: string;
	solutions: string[];
	userSolution?: string;
	maxWords: number;
	disabled?: boolean;
	setUserSolution?: (solution: string) => void;
}) {
	const [userInput, setUserInput] = useState(userSolution || "");

	useEffect(() => {
		const words = userInput.split(" ").filter((x) => x !== "");
		if (words.length >= maxWords) {
			toast.warning(`You have reached your word limit of ${maxWords} words!`, {toastId: "word-limit"});
			setUserInput(words.join(" ").trim());
			if (setUserSolution) setUserSolution(words.join(" ").trim());
		}
	}, [maxWords, userInput, setUserSolution]);

	const isUserSolutionCorrect = () => userSolution && solutions.map((x) => x.trim().toLowerCase()).includes(userSolution.trim().toLowerCase());

	const getSolutionStyling = () => {
		if (!userSolution) {
			return "bg-mti-blue-ultralight text-mti-blue-light";
		}

		return "bg-mti-green-ultralight text-mti-green-light";
	};

	return (
		<span className="inline-flex gap-2">
			{userSolution && !isUserSolutionCorrect() && (
				<input
					className="py-2 px-3 rounded-2xl w-48 focus:outline-none my-2 bg-mti-orange-ultralight text-mti-orange-light"
					placeholder={id}
					onChange={(e) => setUserInput(e.target.value)}
					value={userSolution}
					contentEditable={disabled}
				/>
			)}
			<input
				className={clsx("py-2 px-3 rounded-2xl w-48 focus:outline-none my-2", getSolutionStyling())}
				placeholder={id}
				onChange={(e) => setUserInput(e.target.value)}
				value={!solutions ? userInput : solutions.join(" / ")}
				contentEditable={disabled}
			/>
		</span>
	);
}

export default function WriteBlanksSolutions({
	id,
	prompt,
	maxWords,
	solutions,
	userSolutions,
	text,
	onNext,
	onBack,
}: WriteBlanksExercise & CommonProps) {
	const renderLines = (line: string) => {
		return (
			<span className="text-base leading-5">
				{reactStringReplace(line, /({{\d+}})/g, (match) => {
					const id = match.replaceAll(/[\{\}]/g, "");
					const userSolution = userSolutions.find((x) => x.id === id);
					const solution = solutions.find((x) => x.id === id)!;

					return <Blank userSolution={userSolution?.solution} maxWords={maxWords} id={id} solutions={solution.solution} disabled />;
				})}
			</span>
		);
	};

	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>
				<span className="bg-mti-gray-smoke rounded-xl px-5 py-6">
					{text.split("\\n").map((line, index) => (
						<p key={index}>
							{renderLines(line)}
							<br />
						</p>
					))}
				</span>
				<div className="flex gap-4 items-center">
					<div className="flex gap-2 items-center">
						<div className="w-4 h-4 rounded-full bg-mti-green" />
						Correct
					</div>
					<div className="flex gap-2 items-center">
						<div className="w-4 h-4 rounded-full bg-mti-blue" />
						Unanswered
					</div>
					<div className="flex gap-2 items-center">
						<div className="w-4 h-4 rounded-full bg-mti-orange" />
						Wrong
					</div>
				</div>
			</div>

			<div className="self-end flex justify-between w-full gap-8 absolute bottom-8 left-0 px-8">
				<Button color="green" variant="outline" onClick={() => onBack()} className="max-w-[200px] w-full">
					Back
				</Button>

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