encoach_frontend/src/components/Exercises/MatchSentences.tsx

import {errorButtonStyle, infoButtonStyle} from "@/constants/buttonStyles";
import {MatchSentencesExercise} from "@/interfaces/exam";
import {mdiArrowLeft, mdiArrowRight} from "@mdi/js";
import Icon from "@mdi/react";
import clsx from "clsx";
import {useState} from "react";
import LineTo from "react-lineto";
import {CommonProps} from ".";

const AVAILABLE_COLORS = ["#63526a", "#f7651d", "#278f04", "#ef4487", "#ca68c0", "#f5fe9b", "#b3ab01", "#af963a", "#9a85f1", "#1b1750"];

export default function MatchSentences({allowRepetition, options, prompt, sentences, onNext, onBack}: MatchSentencesExercise & CommonProps) {
	const [selectedQuestion, setSelectedQuestion] = useState<string>();
	const [userSolutions, setUserSolutions] = useState<{question: string; option: string}[]>([]);

	const selectOption = (option: string) => {
		if (!selectedQuestion) return;
		setUserSolutions((prev) => [...prev.filter((x) => x.question !== selectedQuestion), {question: selectedQuestion, option}]);
		setSelectedQuestion(undefined);
	};

	const getSentenceColor = (id: string) => {
		return sentences.find((x) => x.id === id)?.color || "";
	};

	return (
		<>
			<div className="flex flex-col items-center gap-8">
				<span className="text-lg font-medium text-center px-48">{prompt}</span>
				<div className="grid grid-cols-2 gap-16 place-items-center">
					<div className="flex flex-col gap-1">
						{sentences.map(({sentence, id, color}) => (
							<div
								key={`question_${id}`}
								className="flex items-center justify-end gap-2 cursor-pointer"
								onClick={() => setSelectedQuestion((prev) => (prev === id ? undefined : id))}>
								<span>
									<span className="font-semibold">{id}.</span> {sentence}{" "}
								</span>
								<div
									style={{borderColor: color, backgroundColor: selectedQuestion === id ? color : "transparent"}}
									className={clsx("border-2 border-blue-500 w-4 h-4 rounded-full", id)}
								/>
							</div>
						))}
					</div>
					<div className="flex flex-col gap-1">
						{options.map(({sentence, id}) => (
							<div
								key={`answer_${id}`}
								className={clsx("flex items-center justify-start gap-2 cursor-pointer")}
								onClick={() => selectOption(id)}>
								<div
									style={
										userSolutions.find((x) => x.option === id)
											? {
													border: `2px solid ${getSentenceColor(userSolutions.find((x) => x.option === id)!.question)}`,
											  }
											: {}
									}
									className={clsx("border-2 border-green-500 bg-transparent w-4 h-4 rounded-full", id)}
								/>
								<span>
									<span className="font-semibold">{id}.</span> {sentence}{" "}
								</span>
							</div>
						))}
					</div>
					{userSolutions.map((solution, index) => (
						<div key={`solution_${index}`} className="absolute">
							<LineTo
								className="rounded-full"
								from={solution.question}
								to={solution.option}
								borderColor={sentences.find((x) => x.id === solution.question)!.color}
								borderWidth={5}
							/>
						</div>
					))}
				</div>
			</div>

			<div className="self-end flex gap-8">
				<button className={clsx("btn btn-wide gap-4 relative text-white", errorButtonStyle)} onClick={onBack}>
					<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={onNext}>
					Next
					<div className="absolute right-4">
						<Icon path={mdiArrowRight} color="white" size={1} />
					</div>
				</button>
			</div>
		</>
	);
}

export function MatchSentencesSolutions({allowRepetition, options, prompt, sentences, userSolutions}: MatchSentencesExercise) {
	const getSentenceColor = (id: string) => {
		return sentences.find((x) => x.id === id)?.color || "";
	};

	return (
		<div className="flex flex-col items-center gap-8">
			<span className="text-lg font-medium text-center px-48">{prompt}</span>
			<div className="grid grid-cols-2 gap-16 place-items-center">
				<div className="flex flex-col gap-1">
					{sentences.map(({sentence, id, color}) => (
						<div key={`question_${id}`} className="flex items-center justify-end gap-2 cursor-pointer">
							<span>
								<span className="font-semibold">{id}.</span> {sentence}{" "}
							</span>
							<div
								style={{borderColor: color, backgroundColor: "transparent"}}
								className={clsx("border-2 border-blue-500 w-4 h-4 rounded-full", id)}
							/>
						</div>
					))}
				</div>
				<div className="flex flex-col gap-1">
					{options.map(({sentence, id}) => (
						<div key={`answer_${id}`} className={clsx("flex items-center justify-start gap-2 cursor-pointer")}>
							<div
								style={
									userSolutions.find((x) => x.option === id)
										? {
												border: `2px solid ${getSentenceColor(userSolutions.find((x) => x.option === id)!.question)}`,
										  }
										: {}
								}
								className={clsx("border-2 border-green-500 bg-transparent w-4 h-4 rounded-full", id)}
							/>
							<span>
								<span className="font-semibold">{id}.</span> {sentence}{" "}
							</span>
						</div>
					))}
				</div>
				{userSolutions.map((solution, index) => (
					<div key={`solution_${index}`} className="absolute">
						<LineTo
							className="rounded-full"
							from={solution.question}
							to={solution.option}
							borderColor={sentences.find((x) => x.id === solution.question)!.color}
							borderWidth={5}
						/>
					</div>
				))}
			</div>

			<div className="grid grid-cols-2 gap-16 place-items-center">
				<div className="flex flex-col gap-1">
					{sentences.map(({sentence, id, color}) => (
						<div key={`question_${id}`} className="flex items-center justify-end gap-2 cursor-pointer">
							<span>
								<span className="font-semibold">{id}.</span> {sentence}{" "}
							</span>
							<div
								style={{borderColor: color, backgroundColor: "transparent"}}
								className={clsx("border-2 border-blue-500 w-4 h-4 rounded-full", id)}
							/>
						</div>
					))}
				</div>
				<div className="flex flex-col gap-1">
					{options.map(({sentence, id}) => (
						<div key={`answer_${id}`} className={clsx("flex items-center justify-start gap-2 cursor-pointer")}>
							<div
								style={
									userSolutions.find((x) => x.option === id)
										? {
												border: `2px solid ${getSentenceColor(userSolutions.find((x) => x.option === id)!.question)}`,
										  }
										: {}
								}
								className={clsx("border-2 border-green-500 bg-transparent w-4 h-4 rounded-full", id)}
							/>
							<span>
								<span className="font-semibold">{id}.</span> {sentence}{" "}
							</span>
						</div>
					))}
				</div>
				{sentences.map(({id, solution}, index) => (
					<div key={`solution_${index}`} className="absolute">
						<LineTo
							className="rounded-full"
							from={id}
							to={solution}
							borderColor={sentences.find((x) => x.id === id)!.color}
							borderWidth={5}
						/>
					</div>
				))}
			</div>
		</div>
	);
}