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

interface Props {
  exercise: MatchSentencesExercise;
  updateExercise: (data: any) => void;
}
const MatchSentencesEdit = (props: Props) => {
  const { exercise, updateExercise } = props;

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

  return (
    <>
      <Input
        type="text"
        label="Prompt"
        name="prompt"
        required
        value={exercise.prompt}
        onChange={(value) =>
          updateExercise({
            prompt: value,
          })
        }
      />
      <h1>Solutions</h1>
      <div className="w-full flex flex-wrap -mx-2">
        {exercise.sentences.map((sentence, index) => (
          <div key={sentence.id} className="flex flex-col w-full px-2">
            <div className="flex w-full">
              <Input
                type="text"
                label={`Sentence ${index + 1}`}
                name="sentence"
                required
                value={sentence.sentence}
                onChange={(value) =>
                  updateExercise({
                    sentences: exercise.sentences.map((iSol) =>
                      iSol.id === sentence.id
                        ? {
                            ...iSol,
                            sentence: value,
                          }
                        : iSol
                    ),
                  })
                }
                className="px-2"
              />
              <div className="w-48 flex items-end px-2">
                <Select
                  value={selectOptions.find(
                    (o) => o.value === sentence.solution
                  )}
                  options={selectOptions}
                  onChange={(value) => {
                    updateExercise({
                      sentences: exercise.sentences.map((iSol) =>
                        iSol.id === sentence.id
                          ? {
                              ...iSol,
                              solution: value?.value,
                            }
                          : iSol
                      ),
                    });
                  }}
                />
              </div>
            </div>
          </div>
        ))}
        <h1>Options</h1>
        <div className="w-full flex flex-wrap -mx-2">
          {exercise.options.map((option, index) => (
            <div key={option.id} className="flex flex-col w-full px-2">
              <div className="flex w-full">
                <Input
                  type="text"
                  label={`Option ${index + 1}`}
                  name="option"
                  required
                  value={option.sentence}
                  onChange={(value) =>
                    updateExercise({
                      options: exercise.options.map((iSol) =>
                        iSol.id === option.id
                          ? {
                              ...iSol,
                              sentence: value,
                            }
                          : iSol
                      ),
                    })
                  }
                  className="px-2"
                />
                <div className="w-48 flex items-end px-2">
                  <Select
                    value={{
                      value: option.id,
                      label: option.id,
                    }}
                    options={[
                      {
                        value: option.id,
                        label: option.id,
                      },
                    ]}
                    disabled
                    onChange={() => {}}
                  />
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </>
  );
};

export default MatchSentencesEdit;