import React from "react";
import Input from "@/components/Low/Input";
import {
  MultipleChoiceExercise,
  MultipleChoiceQuestion,
} from "@/interfaces/exam";
import Select from "@/components/Low/Select";

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

const variantOptions = [
  { value: "text", label: "Text", key: "text" },
  { value: "image", label: "Image", key: "src" },
];

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

  return (
    <>
      <h1>Questions</h1>
      <div className="w-full flex-no-wrap -mx-2">
        {exercise.questions.map((question: MultipleChoiceQuestion, index) => {
          const variantValue = variantOptions.find(
            (o) => o.value === question.variant
          );

          const solutionsOptions = question.options.map((option) => ({
            value: option.id,
            label: option.id,
          }));

          const solutionValue = solutionsOptions.find(
            (o) => o.value === question.solution
          );
          return (
            <div key={question.id} className="flex w-full px-2 flex-col">
              <span>Question ID: {question.id}</span>

              <Input
                type="text"
                label="Prompt"
                name="prompt"
                required
                value={question.prompt}
                onChange={(value) =>
                  updateExercise({
                    questions: exercise.questions.map((sol) =>
                      sol.id === question.id ? { ...sol, prompt: value } : sol
                    ),
                  })
                }
              />
              <div className="flex w-full">
                <div className="w-48 flex items-end px-2">
                  <Select
                    value={solutionValue}
                    options={solutionsOptions}
                    onChange={(value) => {
                      updateExercise({
                        questions: exercise.questions.map((sol) =>
                          sol.id === question.id
                            ? { ...sol, solution: value?.value }
                            : sol
                        ),
                      });
                    }}
                  />
                </div>
                <div className="w-48 flex items-end px-2">
                  <Select
                    value={variantValue}
                    options={variantOptions}
                    onChange={(value) => {
                      updateExercise({
                        questions: exercise.questions.map((sol) =>
                          sol.id === question.id
                            ? { ...sol, variant: value?.value }
                            : sol
                        ),
                      });
                    }}
                  />
                </div>
              </div>
              <div className="flex w-full flex-wrap -mx-2">
                {question.options.map((option) => (
                  <div
                    key={option.id}
                    className="flex sm:w-1/2 lg:w-1/4 px-2 px-2"
                  >
                    <Input
                      type="text"
                      label={`Option ${option.id}`}
                      name="option"
                      required
                      value={option.text}
                      onChange={(value) =>
                        updateExercise({
                          questions: exercise.questions.map((sol) =>
                            sol.id === question.id
                              ? {
                                  ...sol,
                                  options: sol.options.map((opt) => {
                                    if (
                                      opt.id === option.id &&
                                      variantValue?.key
                                    ) {
                                      return {
                                        ...opt,
                                        [variantValue.key]: value,
                                      };
                                    }

                                    return opt;
                                  }),
                                }
                              : sol
                          ),
                        })
                      }
                    />
                  </div>
                ))}
              </div>
            </div>
          );
        })}
      </div>
    </>
  );
};

export default MultipleChoiceEdit;