import { FillBlanksExercise, FillBlanksMCOption } from "@/interfaces/exam";
import React from "react";
import Input from "@/components/Low/Input";
import clsx from "clsx";

interface Props {
	exercise: FillBlanksExercise;
	updateExercise: (data: any) => void;
}

const FillBlanksEdit = (props: Props) => {
	const { exercise, updateExercise } = props;

	const typeCheckWordsMC = (words: any[]): words is FillBlanksMCOption[] => {
		return Array.isArray(words) && words.every((word) => word && typeof word === "object" && "id" in word && "options" in word);
	};

	return (
		<>
			<Input
				type={exercise?.variant && exercise.variant === "mc" ? "textarea" : "text"}
				label="Prompt"
				name="prompt"
				required
				value={exercise.prompt}
				onChange={(value) =>
					updateExercise({
						prompt: value,
					})
				}
			/>
			<Input
				type={exercise?.variant && exercise.variant === "mc" ? "textarea" : "text"}
				label="Text"
				name="text"
				required
				value={exercise.text}
				onChange={(value) =>
					updateExercise({
						text: exercise?.variant && exercise.variant === "mc" ? value : value,
					})
				}
			/>
			<h1 className="mt-4">Solutions</h1>
			<div className="w-full flex flex-wrap -mx-2">
				{exercise.solutions.map((solution, index) => (
					<div key={solution.id} className="flex sm:w-1/2 lg:w-1/4 px-2">
						<Input
							type="text"
							label={`Solution ${index + 1}`}
							name="solution"
							required
							value={solution.solution}
							onChange={(value) =>
								updateExercise({
									solutions: exercise.solutions.map((sol) => (sol.id === solution.id ? { ...sol, solution: value } : sol)),
								})
							}
						/>
					</div>
				))}
			</div>
			<h1 className="mt-4">Words</h1>
			<div className={clsx(exercise?.variant && exercise.variant === "mc" ? "w-full flex flex-row" : "w-full flex flex-wrap -mx-2")}>
				{exercise?.variant && exercise.variant === "mc" && typeCheckWordsMC(exercise.words) ?
					(
						<div className="flex flex-col w-full">
							{exercise.words.flatMap((mcOptions, wordIndex) =>
								<>
									<label className="font-semibold">{`Word ${wordIndex + 1}`}</label>
									<div className="flex flex-row">
									{Object.entries(mcOptions.options).map(([key, value], optionIndex) => (
										<div key={`${wordIndex}-${optionIndex}-${key}`} className="flex sm:w-1/2 lg:w-1/4 px-2 mb-4">
											<Input
												type="text"
												label={`Option ${key}`}
												name="word"
												required
												value={value}
												onChange={(newValue) =>
													updateExercise({
														words: exercise.words.map((word, idx) =>
															idx === wordIndex
																? {
																	...(word as FillBlanksMCOption),
																	options: {
																		...(word as FillBlanksMCOption).options,
																		[key]: newValue
																	}
																}
																: word
														)
													})
												}
											/>
										</div>
									))}
									</div>
								</>
							)}
						</div>
					)
					:
					(
						exercise.words.map((word, index) => (
							<div key={index} className="flex sm:w-1/2 lg:w-1/4 px-2">
								<Input
									type="text"
									label={`Word ${index + 1}`}
									name="word"
									required
									value={typeof word === "string" ? word : ("word" in word ? word.word : "")}
									onChange={(value) =>
										updateExercise({
											words: exercise.words.map((sol, idx) =>
												index === idx ? (typeof word === "string" ? value : { ...word, word: value }) : sol,
											),
										})
									}
								/>
							</div>
						))
					)
				}
			</div>
		</>
	);
};

export default FillBlanksEdit;
