import { WriteBlanksExercise } from "@/interfaces/exam";
import clsx from "clsx";
import { useCallback, useEffect, useState } from "react";
import reactStringReplace from "react-string-replace";
import { CommonProps } from "../types";
import Blank from "./Blank";
import PracticeBadge from "../../Low/PracticeBadge";

const WriteBlanks: React.FC<WriteBlanksExercise & CommonProps> = ({
	id,
	prompt,
	type,
	maxWords,
	solutions,
	userSolutions,
	isPractice = false,
	text,
	registerSolution,
	headerButtons,
	footerButtons,
}) => {
	const [answers, setAnswers] = useState<{ id: string; solution: string }[]>(userSolutions);

	const calculateScore = useCallback(() => {
		const total = text.match(/({{\d+}})/g)?.length || 0;
		const correct = answers.filter(
			(x) =>
				solutions
					.find((y) => x.id.toString() === y.id.toString())
					?.solution.map((y) => y.toLowerCase().trim())
					.includes(x.solution.toLowerCase().trim()) || false,
		).length;
		const missing = total - answers.filter((x) => solutions.find((y) => x.id === y.id)).length;

		return { total, correct, missing };
	}, [answers, solutions, text]);

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


	const renderLines = (line: string) => {
		return (
			<span className="text-base leading-5">
				{reactStringReplace(line, /({{\d+}})/g, (match) => {
					const id = match.replaceAll(/[\{\}]/g, "");
					const userSolution = answers.find((x) => x.id === id);
					const setUserSolution = (solution: string) => {
						setAnswers((prev) => [...prev.filter((x) => x.id !== id), { id, solution }]);
					};

					return <Blank key={`blank-${id}`} userSolution={userSolution?.solution} maxWords={maxWords} id={id} setUserSolution={setUserSolution} />;
				})}
			</span>
		);
	};

	return (
		<div className="flex flex-col gap-4 relative">
			{headerButtons}
			<div className={clsx("flex flex-col gap-4 mt-4 h-full w-full", (headerButtons && footerButtons) && "mb-20")}>
				<span className="text-sm w-full leading-6">
					{prompt.split("\\n").map((line, index) => (
						<span key={index}>
							{line}
							<br />
						</span>
					))}
				</span>
				{isPractice && <PracticeBadge className="w-fit self-end" />}
				<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>
				{footerButtons}
			</div>
			
		</div>
	);
}

export default WriteBlanks;