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

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

const FillBlanksEdit = (props: Props) => {
	const {exercise, updateExercise} = props;
	return (
		<>
			<Input
				type="text"
				label="Prompt"
				name="prompt"
				required
				value={exercise.prompt}
				onChange={(value) =>
					updateExercise({
						prompt: value,
					})
				}
			/>
			<Input
				type="text"
				label="Text"
				name="text"
				required
				value={exercise.text}
				onChange={(value) =>
					updateExercise({
						text: value,
					})
				}
			/>
			<h1>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>Words</h1>
			<div className="w-full flex flex-wrap -mx-2">
				{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;
