Quiz_dashboard/src/Pages/Admin/question/AddPage.tsx

import React, { useEffect } from "react";
import { Spin } from "antd";
import {
  getInitialValues,
  getValidationSchema,
  getInitialValuesBase,
  getValidationSchemaBase,
  processTags,
} from "./formUtil";
import { useAddQuestion, useAddQuestionAsync } from "../../../api/Question";
import { useTranslation } from "react-i18next";
import { useLocation, useNavigate, useParams } from "react-router-dom";
import { ParamsEnum } from "../../../enums/params";
import { useObjectToEdit } from "../../../zustand/ObjectToEditState";

import Header from "../../../Components/exercise/Header";
import { Question } from "../../../types/Item";
import BaseForm from "./Model/Malty/Form";
import ModelForm from "./Model/ModelForm";
import { toast } from "react-toastify";
import { Form, Formik } from "formik";
import { MdOutlineArrowForwardIos } from "react-icons/md";

const AddPage: React.FC = () => {
  const location = useLocation();

  const { mutateAsync,isLoading:LoadingAsync } = useAddQuestionAsync();
  const { mutate, isLoading, isSuccess } = useAddQuestion();
  const { isBseQuestion, setTagsSearch, setSuccess } =
    useObjectToEdit();

  const [t] = useTranslation();
  const { subject_id, lesson_id } = useParams<ParamsEnum>();

  const handleFormSubmit = ( values: any) => {
    const DataToSend = structuredClone(values);
    setTagsSearch(null);

    const canAnswersBeShuffled = DataToSend?.canAnswersBeShuffled ? 1 : 0;

    if (isBseQuestion || DataToSend?.isBase === 1) {
      const newBseQuestion = {
        subject_id: subject_id,
        content: DataToSend?.content,
        content_image: DataToSend?.content_image ?? "",
        isBase: 1,
        lessons_ids: [lesson_id],
        canAnswersBeShuffled,
        hint: DataToSend?.hint,
      };

      mutateAsync(newBseQuestion).then((data: any) => {
        const newBseQuestionId = (data as any)?.data?.id;
        const Questions = DataToSend?.Questions;
        console.log(1);

        Questions?.map((item: Question) => {
          const tags = processTags(item);
          console.log(item);
          const answers = item?.answers?.map((item: any, index: number) => {
            return {
              order: index,
              ...item,
            };
          });
        
          mutate({
            ...item,
            parent_id: newBseQuestionId,
            subject_id: subject_id,
            tags,
            lessons_ids: [lesson_id],
            answers,
          });
        });
        console.log(newBseQuestionId, "newBseQuestionId");
      });
    } else {
      const tags = processTags(DataToSend);
      const answers = values?.answers?.map((item: any, index: number) => {
        return {
          order: index,
          ...item,
        };
      });


      const NewQuestion = {
        ...values,
        subject_id: subject_id,
        tags,
        lessons_ids: [lesson_id],
        canAnswersBeShuffled,
        answers,
      };
      console.clear();
      console.log(NewQuestion, "NewQuestion");

      mutate(NewQuestion);
    }
  };
  
  const handleValidateSingleQuestion = (values:any,isValid:boolean,handleSubmit:any)=>{
      const haveMoreThanOneAnswer =  values?.answers?.length > 1;      
      const haveOneAnswerRight = haveMoreThanOneAnswer && values?.answers?.some((item:any)=> item?.isCorrect === 1 || item.isCorrect === true )
      const haveImageOrContent = haveOneAnswerRight && values?.answers?.some((item:any)=> !(item?.content)  && !(item.content_image)  )
      const content = values.content ;
      const content_image = values.content_image ;
      const haveContentOrContentImage = !!content || !!content_image ;
      console.log(haveImageOrContent,"haveImageOrContent");
      if(!haveContentOrContentImage){
        toast.error(`${t("validation.one_of_image_and_content_should_be_enter_in_question")}`);
        return false;
      }

      if(!haveMoreThanOneAnswer){
          toast.error(t("validation.it_should_have_more_than_one_answers")) ;
          return false ;
      }
      if(!haveOneAnswerRight){
        toast.error(t("validation.it_should_have_more_than_one_correct_answers")) ;
        return false ;
    }
    if(haveImageOrContent){
      toast.error(t("validation.one_of_image_and_content_should_be_enter_in_answer"))
      return false
    }

    console.log(1);
    
    if(isValid){
      handleSubmit(values)
    }
      
  }
  const handleValidateBaseQuestion = (values: any,isValid:boolean,handleSubmit:any) => {  
    const content = values.content ;
    const content_image = values.content_image ;
    const haveContentOrContentImage = !!content || !!content_image ;
    console.log(2);
    
    if(!haveContentOrContentImage){
      toast.error(`${t("validation.one_of_image_and_content_should_be_enter_in_question")}`);
      return false;
    }
      console.log(1);
      
   const isValidate = values?.Questions?.every((Question: any, QuestionsIndex: number) => {


      const content = Question.content ;
      const content_image = Question.content_image ;
      const haveContentOrContentImage = !!content || !!content_image ;
      if(!haveContentOrContentImage){
        toast.error(`${t("validation.one_of_image_and_content_should_be_enter_in_question")}`);
        return false;
      }


      //// answers
      const answers = Question?.answers;
      const haveAnswers = answers?.length > 0;
      const haveMoreThanOneAnswer = haveAnswers && answers?.length > 1;
      const haveOneAnswerRight = haveMoreThanOneAnswer && answers?.some((item: any) => item?.isCorrect === 1 || item.isCorrect === true);
      const haveImageOrContent = haveOneAnswerRight && answers?.some((item:any)=> !(item?.content)  && !(item.content_image)  )
      
      
   

      if (!haveAnswers) {
        toast.error(t("validation.it_should_have_more_than_one_answers"));
        return false;
      }
  
      if (!haveMoreThanOneAnswer) {
        toast.error(t("validation.it_should_have_more_than_one_answers"));
        return false; 
      }
  
      if (!haveOneAnswerRight) {
        toast.error(t("validation.it_should_have_more_than_one_correct_answers"));
        return false;
      }

      if(haveImageOrContent){
        toast.error(t("validation.one_of_image_and_content_should_be_enter_in_answer"))
        return false
      }
  
      return true
    });

        console.log(1);
        
  if(isValid && isValidate){
    console.log(2);
    handleSubmit(values)
  }
    
  };
  
  const navigate = useNavigate();

  const handleNavigateToPage = () => {
    const cleanedUrl = location.pathname?.replace("/Question/add", "");
    navigate(cleanedUrl);
  };
  const handleCancel = () => {
    navigate(-1);
  };
  const Loading = LoadingAsync || isLoading;
  
  useEffect(() => {
    if (isSuccess) {
      setSuccess(true);
    }
  }, [isSuccess]);

  if (isBseQuestion) {
    return (
      
      <div className="QuestionPractical">
      <header>
      <MdOutlineArrowForwardIos onClick={handleNavigateToPage} />  {t("header.add_new_question")}
      </header>

      <div className="exercise_add">
        <Formik
        onSubmit={handleFormSubmit}
        initialValues={getInitialValuesBase({} as any)}
        validationSchema={getValidationSchemaBase}
        enableReinitialize
        
        >
            {({ values,isValid,handleSubmit }) => (

<Form className="w-100">
          <main className="w-100 exercise_add_main">
            <Header />
            <BaseForm />

            <div className="exercise_add_buttons">
              <div onClick={handleCancel}>{t("practical.back")}</div>
              <button disabled={Loading} className="relative" type="button" 
               onClick={()=>{handleValidateBaseQuestion(values,isValid,handleSubmit) }}
               onSubmit={()=>{handleValidateBaseQuestion(values,isValid,handleSubmit) }}
              >
                {t("practical.add")}

                {Loading && (
                  <span className="Spinier_Div">
                    <Spin />
                  </span>
                )}
              </button>
            </div>
          </main>
          </Form>
            )}
        </Formik>
   
      </div>
      </div>

    );
  }

  return (

  <div className="QuestionPractical">
        <header>
        <MdOutlineArrowForwardIos onClick={handleNavigateToPage} />  {t("header.add_new_question")}
        </header>
<div className="exercise_add">
     <Formik
  enableReinitialize={true}
  initialValues={getInitialValues({} as any)}
  validationSchema={getValidationSchema}
  validateOnMount={true} 
  onSubmit={(values) => {
    handleFormSubmit(values); 
  }}
>
  {({ values,isValid ,handleSubmit}) => (
    <Form className="w-100">
      <main className="w-100 exercise_add_main">
        <Header />
        <ModelForm />

        <div className="exercise_add_buttons">
          <div onClick={handleCancel}>{t("practical.back")}</div>
          <div
            className="relative"
            onClick={()=>{ Loading ? ()=>{} : handleValidateSingleQuestion(values,isValid,handleSubmit)  }}
          >
            {t("practical.add")}

            {Loading && (
              <span className="Spinier_Div">
                <Spin />
              </span>
            )}
          </div>
        </div>
      </main>
    </Form>
  )}
</Formik>
 
    </div>
    </div>
  );
};

export default AddPage;