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";

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}].QuestionOptions`, [
      ...((formik?.values as any)?.Questions?.[parent_index]
        .QuestionOptions 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,
        QuestionOptions: [{ 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();

  return (
    <Row className="w-100">
      <div className="exercise_form">
        <ValidationField
          className="textarea_exercise"
          name="content"
          label="main_question"
          type="TextArea"
        />
        <ValidationField
          className="file_exercise"
          name="image"
          label="attachment"
          type="File"
        />

        {/* <div className="">
      <ValidationField  name="max_mark" label="max_mark" type="Number" className="inputSmall" disabled /> 
        <ValidationField  name="min_mark_to_pass" label="min_mark_to_pass" className="inputSmall" type="Number"  />

      </div> */}
        <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]?.QuestionOptions
                ?.length < 5 && (
                <p className="add_new_button">
                  <FaCirclePlus
                    onClick={() => handleAddChoice(parent_index)}
                    size={23}
                  />{" "}
                  {t("header.add_new_choice")}
                </p>
              )}

              <DynamicTags parent_index={parent_index} />
            </div>
          );
        },
      )}

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

export default Form;
