encoach_frontend/src/components/Exercises/Writing.tsx

/* eslint-disable @next/next/no-img-element */
import {errorButtonStyle, infoButtonStyle} from "@/constants/buttonStyles";
import {WritingExercise} from "@/interfaces/exam";
import {mdiArrowLeft, mdiArrowRight} from "@mdi/js";
import Icon from "@mdi/react";
import clsx from "clsx";
import {CommonProps} from ".";
import {Fragment, useEffect, useState} from "react";
import {toast} from "react-toastify";

export default function Writing({id, prompt, info, type, wordCounter, attachment, onNext, onBack}: WritingExercise & CommonProps) {
	const [inputText, setInputText] = useState("");
	const [isSubmitEnabled, setIsSubmitEnabled] = useState(false);

	useEffect(() => {
		const words = inputText.split(" ").filter((x) => x !== "");

		if (wordCounter.type === "min") {
			setIsSubmitEnabled(wordCounter.limit <= words.length);
		} else {
			setIsSubmitEnabled(true);
			if (wordCounter.limit < words.length) {
				toast.warning(`You have reached your word limit of ${wordCounter.limit} words!`, {toastId: "word-limit"});
				setInputText(words.slice(0, words.length - 1).join(" "));
			}
		}
	}, [inputText, wordCounter]);

	return (
		<div className="flex flex-col h-full w-2/3 items-center justify-center gap-8">
			<div className="flex flex-col max-w-2xl gap-2">
				<span>{info}</span>
				<span className="font-bold ml-8">
					{prompt.split("\\n").map((line, index) => (
						<Fragment key={index}>
							<span>{line}</span>
							<br />
						</Fragment>
					))}
				</span>
				<span>
					You should write {wordCounter.type === "min" ? "at least" : "at most"} {wordCounter.limit} words.
				</span>
				{attachment && <img src={attachment} alt="Exercise attachment" />}
			</div>

			<textarea
				className="w-full h-1/3 cursor-text p-2 input input-bordered bg-white"
				onChange={(e) => setInputText(e.target.value)}
				value={inputText}
				placeholder="Write your text here..."
			/>

			<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={onBack}>
					<div className="absolute left-4">
						<Icon path={mdiArrowLeft} color="white" size={1} />
					</div>
					Back
				</button>
				{!isSubmitEnabled && (
					<div className="tooltip" data-tip={`You have not yet reached your minimum word count of ${wordCounter.limit} words!`}>
						<button
							className={clsx("btn btn-wide gap-4 relative text-white", infoButtonStyle)}
							disabled={!isSubmitEnabled}
							onClick={() => onNext({exercise: id, solutions: [inputText], score: {correct: 1, total: 1}, type})}>
							Next
						</button>
					</div>
				)}
				{isSubmitEnabled && (
					<button
						className={clsx("btn btn-wide gap-4 relative text-white", infoButtonStyle)}
						disabled={!isSubmitEnabled}
						onClick={() => onNext({exercise: id, solutions: [inputText], score: {correct: 1, total: 1}, type})}>
						Next
						<div className="absolute right-4">
							<Icon path={mdiArrowRight} color="white" size={1} />
						</div>
					</button>
				)}
			</div>
		</div>
	);
}