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 File from "./File";
import { FaTrash } from "react-icons/fa";
import { toast } from "react-toastify";
import HintField from "./HintField";
import ImageBoxField from "../../../../../../Components/CustomFields/ImageBoxField/ImageBoxField";
import { GoTrash } from "react-icons/go";

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

  const [t] = useTranslation();

  const handleDeleteChoice = () => {
    const arrayLength = formik.values.Questions?.[parent_index].answers?.length;

    console.log(arrayLength);

    if (arrayLength === 1) {
      toast.error(
        t("validation.Sorry, the question must have at least one option"),
      );
      return;
    }

    const updatedAnswers = formik.values.Questions?.[
      parent_index
    ].answers.filter((_: any, i: any) => i !== index);
    formik.setFieldValue(`Questions[${parent_index}].answers`, updatedAnswers);
  };

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

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

        <div className="answer_status">
          <CheckboxField
            className=""
            label="The_correct_answer"
            name={index}
            type="Checkbox"
            parent_index={parent_index}
          />
          <p className="delete_question_options" onClick={handleDeleteChoice}>
            {t("header.delete_choice")}
            <GoTrash
              className="trash_icon"
              
              size={17}
            />
          </p>
        </div>
      </div>

      <div className="exercise_form_width">
        <ValidationField
          className=" "
          placeholder="_"
          name={`Questions.${parent_index}.answers.${index}.hint`}
          label="hint"
          type="TextArea"
          style={{ width: "100%" , height: 60,resize:"none" }}
          showCount={false}
        />
      </div>
    </>
  );
};

export default ChoiceFields;
