import React, { useEffect }  from "react";
import { Modal, Spin } from "antd";
import FormikForm from "../../Layout/Dashboard/FormikFormModel";
import ModelBody from "./Model/Add";
import { getInitialValues, getValidationSchema ,getInitialValuesBase, getValidationSchemaBase, processTags} from "./Model/formUtil";
import { useAddQuestion } from "../../api/Question";
import { useTranslation } from "react-i18next";
import { 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/Add'
import Form from './Model/Add'
import { toast } from "react-toastify";

const AddPage: React.FC = () => {


  const { mutate, isSuccess, isLoading ,mutateAsync} = useAddQuestion();
  const {object_to_edit,set_Tags_search} = useObjectToEdit()

  const {subject_id} = useParams<ParamsEnum>()
  const {isBseQuestion,set_isBseQuestion} = useObjectToEdit()

  const handleSubmit = (values: Question) => {
    const DataToSend = structuredClone(values);
    console.log(DataToSend,"DataToSend");
    set_Tags_search(null)
    
      if(isBseQuestion){
        const newBseQuestion = {
          "subject_id" : subject_id,
          "content" : DataToSend?.content,
          "image": DataToSend?.image ?? "",
          "isBase" : 1,
        }

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

          
          Questions?.map((item:Question)=>{
            const tags = processTags(item)

              mutate({
                ...item,
                parent_id:newBseQuestionId,
                "subject_id" : subject_id,
                tags
              })
              
          })
            console.log(newBseQuestionId,"newBseQuestionId");
            
            
        })
      }else{
          const tags = processTags(DataToSend)
          console.log(tags);
          
        mutate({ ...values,   subject_id:subject_id , tags });
      }
  };
  const navigate = useNavigate()
  useEffect(() => {
      if(isSuccess){
        toast.success(t("validation.the_possess_done_successful"))
        navigate(-1)

      }
  }, [isSuccess])
  
  const handleCancel = () => {
    navigate(-1)
  };

  const [t] = useTranslation();
  
  if(isBseQuestion){
    return (
      <div className="exercise_add">
  
          <FormikForm
            handleSubmit={handleSubmit}
            initialValues={getInitialValuesBase(object_to_edit)}
            validationSchema={getValidationSchemaBase}
          >
          
            <main className="w-100 exercise_add_main">
            <Header/> 
            <BaseForm/>
              <div className="exercise_add_buttons">
                <div onClick={handleCancel}>{t("practical.back")}</div>
                <button disabled={isLoading} className="relative" type="submit">
                  {t("practical.add")}
  
                  {isLoading && (
                    <span className="Spinier_Div">
                      <Spin />
                    </span>
                  )}
                </button>
              </div>
            </main>
          </FormikForm>
  
      </div>
    );
  }
  return (
    <div className="exercise_add">

        <FormikForm
          handleSubmit={handleSubmit}
          initialValues={getInitialValues(object_to_edit)}
          validationSchema={getValidationSchema}
        >
        
          <main className="w-100 exercise_add_main">
          <Header/>
            <Form/>
           
            <div className="exercise_add_buttons">
              <div onClick={handleCancel}>{t("practical.back")}</div>
              <button disabled={isLoading} className="relative" type="submit">
                {t("practical.add")}

                {isLoading && (
                  <span className="Spinier_Div">
                    <Spin />
                  </span>
                )}
              </button>
            </div>
          </main>
        </FormikForm>

    </div>
  );
};

export default AddPage;


