import React from "react";
import { TrueFalseExercise } from "@/interfaces/exam";
import Input from "@/components/Low/Input";
import Select from "@/components/Low/Select";
interface Props {
  exercise: TrueFalseExercise;
  updateExercise: (data: any) => void;
}

const options = [
  { value: "true", label: "True" },
  { value: "false", label: "False" },
  { value: "not_given", label: "Not Given" },
];

const TrueFalseEdit = (props: Props) => {
  const { exercise, updateExercise } = props;
  return (
    <>
      <Input
        type="text"
        label="Prompt"
        name="prompt"
        required
        value={exercise.prompt}
        onChange={(value) =>
          updateExercise({
            prompt: value,
          })
        }
      />
      <h1>Questions</h1>
      <div className="w-full flex-no-wrap -mx-2">
        {exercise.questions.map((question, index) => (
          <div key={question.id} className="flex w-full px-2">
            <Input
              type="text"
              label={`Question ${index + 1}`}
              name="question"
              required
              value={question.prompt}
              onChange={(value) =>
                updateExercise({
                  questions: exercise.questions.map((sol) =>
                    sol.id === question.id ? { ...sol, prompt: value } : sol
                  ),
                })
              }
            />
            <div className="w-48 flex items-end px-2">
              <Select
                value={options.find((o) => o.value === question.solution)}
                options={options}
                onChange={(value) => {
                  updateExercise({
                    questions: exercise.questions.map((sol) =>
                      sol.id === question.id ? { ...sol, solution: value?.value } : sol
                    ),
                  });
                }}
                className="h-18"
              />
            </div>
          </div>
        ))}
      </div>
    </>
  );
};

export default TrueFalseEdit;