import React from "react";
import { Choice } from "../../../../../types/Item";
import ValidationField from "../../../../../Components/ValidationField/ValidationField";
import { useFormikContext } from "formik";
import { useTranslation } from "react-i18next";
import { getCharFromNumber } from "../../../../../utils/getCharFromNumber";
import CheckboxField from "./CheckboxField";
import TextField from "./TextField";
import ImageBoxField from "../../../../../Components/CustomFields/ImageBoxField/ImageBoxField";
import { GoTrash } from "react-icons/go";

const ChoiceFields = ({ index, data }: { index: number; data: Choice }) => {
  const formik = useFormikContext<any>();

  const [t] = useTranslation();

  const handleDeleteChoice = () => {
    console.log(index);
    console.log(formik.values.answers[index]);

    const updatedAnswers = formik.values.answers.filter(
      (_: any, i: any) => i !== index,
    );

    formik.setFieldValue("answers", updatedAnswers);
  };

  return (
    <>
      <div className="ChoiceFields">
        <TextField
          className="textarea_exercise"
          placeholder={"choice"}
          label2={
            t(`input.choice`) +
            ` ` +
            `( ${t(`alphabet.${getCharFromNumber(index)}`)} )`
          }
          name={index}
          id={`choice_${index + 1}`}
          type="TextArea"
        />

        <ImageBoxField name={`answers.${index}.content_image`} />

        <div className="answer_status">
          <CheckboxField
            className=""
            label="The_correct_answer"
            name={index}
            type="Checkbox"
          />
          <p className="delete_question_options">
            {t("header.delete_choice")}
            <GoTrash
              className="trash_icon"
              onClick={handleDeleteChoice}
              size={17}
            />
          </p>
        </div>
      </div>
      <div className="exercise_form_width">
        <ValidationField
          className=" "
          placeholder="_"
          name={`answers.${index}.hint`}
          label="hint"
          type="text"
          style={{ width: "100%" }}
        />
      </div>
    </>
  );
};

export default ChoiceFields;