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

interface Props {
  exercise: WriteBlanksExercise;
  updateExercise: (data: any) => void;
}
const WriteBlankEdits = (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,
          })
        }
      />
      <Input
        type="text"
        label="Max Words"
        name="number"
        required
        value={exercise.maxWords}
        onChange={(value) =>
          updateExercise({
            maxWords: Number(value),
          })
        }
      />
      <h1>Solutions</h1>
      <div className="w-full flex flex-wrap -mx-2">
        {exercise.solutions.map((solution) => (
          <div key={solution.id} className="flex flex-col w-full px-2">
            <span>Solution ID: {solution.id}</span>
            {/* TODO: Consider adding an add and delete button */}
            <div className="flex flex-wrap">
            {solution.solution.map((sol, solIndex) => (
              <Input
                key={`${sol}-${solIndex}`}
                type="text"
                label={`Solution ${solIndex + 1}`}
                name="solution"
                required
                value={sol}
                onChange={(value) =>
                  updateExercise({
                    solutions: exercise.solutions.map((iSol) =>
                      iSol.id === solution.id
                        ? {
                            ...iSol,
                            solution: iSol.solution.map((iiSol, iiIndex) => {
                              if (iiIndex === solIndex) {
                                return value;
                              }

                              return iiSol;
                            }),
                          }
                        : iSol
                    ),
                  })
                }
                className="sm:w-1/2 lg:w-1/4 px-2"
              />
            ))}
            </div>
          </div>
        ))}
      </div>
    </>
  );
};

export default WriteBlankEdits;