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 PdfUploader from "../../../Components/CustomFields/PdfUploader";
import ChoiceFields from "./Field/ChoiceFields";
import { FaCirclePlus } from "react-icons/fa6";
import { Choice } from "../../../types/Item";
import { useTranslation } from "react-i18next";
import DynamicTags from "./Tags/DynamicTags";
import { useGetAllQuestion } from "../../../api/Question";

const Form = () => {
  const formik = useFormikContext<any>();
  const { isOpen } = useModalState((state) => state);
  // const {data} = useGetAllQuestion();

  useEffect(() => {
    if (isOpen === "") {
      formik.setErrors({});
      formik.resetForm();
    }
  }, [isOpen]);

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

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

      {
        answer: null,
        answer_image: null,
        isCorrect: 0,
      },
    ]);
  };
  const [t] = useTranslation();

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

        {/* <ValidationField  name="isBase" label="isBase" type="Checkbox" /> */}
        <div></div>
      </div>
      <div className=" flex ">
        {/* <ValidationField  name="min_mark_to_pass" label="min_mark_to_pass" type="Number" /> */}

        {/* <ValidationField  name="parent_id" label="parent_id" type="Select" option={[]} /> */}
      </div>
      {(((formik?.values as any)?.QuestionOptions as Choice[]) || []).map(
        (item: Choice, index: number) => {
          return <ChoiceFields key={index} index={index} data={item} />;
        },
      )}
      {formik?.values?.QuestionOptions?.length < 5 && (
        <p className="add_new_button">
          <FaCirclePlus onClick={handleAddChoice} size={23} />{" "}
          {t("header.add_new_choice")}
        </p>
      )}

      <DynamicTags />
    </Row>
  );
};

export default Form;
