Quiz_dashboard/src/Pages/Admin/question/Model/Malty/Form.tsx

import { Col, Row } from "reactstrap";
import React, { useEffect } from "react";
import ValidationField from "../../../../../Components/ValidationField/ValidationField";
import { useFormikContext } from "formik";
import { FaCirclePlus } from "react-icons/fa6";
import { Choice } from "../../../../../types/Item";
import { useTranslation } from "react-i18next";
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";
import { toast } from "react-toastify";

const Form = () => {
  const formik = useFormikContext<any>();
  const { setSuccess, Success, setSavedQuestionData ,ShowHint} = useObjectToEdit();
  console.log(formik.errors);
  
  useEffect(() => {
    setSavedQuestionData(formik.values);
  }, [formik?.values]);

  const handleAddChoice = (
    parent_index: number,
    fromKeyCombination: boolean = false,
  ) => {

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

      {
        answer: null,
        content_image: null,
        content:null,
        isCorrect: 0,
      },
    ]);

    if (fromKeyCombination) {
      toast.success(t("header.new_choice_have_been_added"));
    }
  };

  const handleAddQuestion = (fromKeyCombination: boolean = false) => {
    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);
    if (fromKeyCombination) {
      toast.success(t("header.new_question_have_been_added"));
    }
  };
  const [t] = useTranslation();

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

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


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

  
 
  

  
  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">
                <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">
                {ShowHint && 
                <ValidationField
                  className=" "
                  placeholder="_"
                  name={`Questions.${parent_index}.hint`}
                  label="hint_question"
                  type="TextArea"
          style={{ width: "100%" , height: 60,resize:"none" }}
          autoSize={{ minRows: 2, maxRows: 10 }} 
          showCount={false}
                />
                
                }
                <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;