import { Col, Row } from "reactstrap";
import React, { useEffect } from "react";
import ValidationField from "../../../../../Components/ValidationField/ValidationField";
import { useFormikContext } from "formik";
import { useModalState } from "../../../../../zustand/Modal";
import ChoiceFields from "./ChoiceField/ChoiceFields";
import { FaCirclePlus } from "react-icons/fa6";
import { Choice } from "../../../../../types/Item";
import { useTranslation } from "react-i18next";
import DynamicTags from "./Tags/DynamicTags";
import QuestionFIeld from "./QuestionFIeld/QuestionFIeld";
import { useObjectToEdit } from "../../../../../zustand/ObjectToEditState";
import Choices from "./ChoiceField/Choices";
import ImageBoxField from "../../../../../Components/CustomFields/ImageBoxField/ImageBoxField";
import MaltySelectTag from "./Tags/MaltySelectTag";
import useKeyCombination from "../../../../../Hooks/useKeyCombination";
import { CombinationKeyEnum } from "../../../../../enums/CombinationKeyEnum";

const Form = () => {
  const formik = useFormikContext<any>();
  const { setSuccess, Success, setSavedQuestionData } = useObjectToEdit();

  useEffect(() => {
    if (Success) {
      formik.setErrors({});
      formik.resetForm({ values: {} });
      setSuccess(false);
    }
  }, [Success]);

  useEffect(() => {
    setSavedQuestionData(formik.values);
  }, [formik?.values]);

  // console.log(formik?.errors);

  const handleAddChoice = (parent_index: number) => {
    console.log(parent_index);

    formik.setFieldValue(`Questions.[${parent_index}].answers`, [
      ...((formik?.values as any)?.Questions?.[parent_index]?.answers as Choice[]),

      {
        answer: null,
        answer_image: null,
        isCorrect: 0,
      },
    ]);
  };

  const handleAddQuestion = () => {
    formik.setFieldValue("Questions", [
      ...((formik?.values as any)?.Questions as Choice[]),

      {
        content: "",
        image: "",
        parent: "",
        isBase: 0,
        // max_mark: 1,
        // min_mark_to_pass: 1,
        answers: [{ answer: null, answer_image: null, isCorrect: 0 }],
        tags: [],
      },
    ]);

    const max_mark = formik?.values?.max_mark + 1;

    formik.setFieldValue("max_mark", max_mark);
  };
  const [t] = useTranslation();


  const lastQuestions = formik?.values?.Questions?.length -1 ;
  useKeyCombination({ ctrlKey: true, shiftKey: true, code: CombinationKeyEnum.CHOICE }, () => {
    handleAddChoice(lastQuestions)
  });

  useKeyCombination({ ctrlKey: true, shiftKey: true, code: CombinationKeyEnum.QUESTION }, () => {
    
    handleAddQuestion()
  });



  return (

    <Row className="w-100 exercise_form_container">
      <div className="exercise_form">
        <ValidationField
          className="textarea_exercise"
          name="content"
          label="main_question"
          type="TextArea"
        />
        <ImageBoxField name="content_image" />

        <div></div>
      </div>
      <div className=" flex "></div>

      {((formik?.values as any)?.Questions || [])?.map(
        (item: Choice, parent_index: number) => {
          return (
            <div key={parent_index}>
              <div className="exercise_form">
                <QuestionFIeld
                  key={parent_index}
                  index={parent_index}
                  data={item}
                />
              </div>

              <Choices parent_index={parent_index} />

              {formik?.values?.Questions?.[parent_index]?.answers?.length <
                5 && (
                <p className="add_new_button">
                  <FaCirclePlus
                    onClick={() => handleAddChoice(parent_index)}
                    size={23}
                  />{" "}
                  {t("header.add_new_choice")}
                </p>
              )}

              <div className="exercise_form_width">
                <ValidationField
                  className=" "
                  placeholder="_"
                  name={`Questions.${parent_index}.hint`}
                  label="hint_question"
                  type="text"
                  style={{ width: "100%" }}
                />
                <MaltySelectTag parent_index={parent_index} />
              </div>
            </div>
          );
        },
      )}

      <p className="add_new_button">
        <FaCirclePlus onClick={handleAddQuestion} size={23} />{" "}
        {t("header.add_new_question")}
      </p>
    </Row>
  );
};

export default Form;