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 { toast } from "react-toastify";
import ImageBoxField from "../../../../../../Components/CustomFields/ImageBoxField/ImageBoxField";
import { GoTrash } from "react-icons/go";
import { Popconfirm } from "antd";
import { useObjectToEdit } from "../../../../../../zustand/ObjectToEditState";

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

  const [t] = useTranslation();
  const { ShowHint } = useObjectToEdit();
  const handleDeleteChoice = () => {
    document.getElementById(`ChoiceField_${parent_index}_${index}`)?.classList.add("exit")    

    const updatedAnswers = formik.values.Questions?.[
      parent_index
    ].answers.filter((_: any, i: any) => i !== index);
    setTimeout(() => {
      formik.setFieldValue(`Questions[${parent_index}].answers`, updatedAnswers);
      document.getElementById(`ChoiceField_${parent_index}_${index}`)?.classList.remove("exit")    

    }, 500);
  };

  const values = formik.values.Questions?.[parent_index]?.answers?.[index] ;
  
  const handelCanDeleteAnswers = ()=>{
    const content = values?.content ;
    const content_image = values?.content_image ;
    if(!content  && !content_image ){
      return true
    }
    return false
  }


  return (
    <>
      <div id={`ChoiceField_${parent_index}_${index}`} 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}
          />


          {handelCanDeleteAnswers() ? 
             <p className="delete_question_options" onClick={()=>{handleDeleteChoice()}} >
             {t("header.delete_choice")}
             <GoTrash
               className="trash_icon"
               
               size={17}
             />
           </p>
            :  

            <Popconfirm
    title={t("header.this_will_un_do_all_your_changes")}
    okText={t("practical.yes")}
    cancelText={t("practical.no")}
    onConfirm={()=>{handleDeleteChoice()}}
    defaultOpen={false}

  >
          <p className="delete_question_options" >
            {t("header.delete_choice")}
            <GoTrash
              className="trash_icon"
              
              size={17}
            />
          </p>

    </Popconfirm>

        }


        </div>
      </div>

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

export default ChoiceFields;