import React, { useEffect } from "react";
import { Modal, Spin } from "antd";
import { useModalState } from "../../../../../../zustand/Modal";
import FormikForm from "../../../../../../Layout/Dashboard/FormikFormModel";
import ModelBody from "./Add";
import { getInitialValues, getValidationSchema } from "./formUtil";
import { ModalEnum } from "../../../../../../enums/Model";
import { useObjectToEdit } from "../../../../../../zustand/ObjectToEditState";
import { useParams } from "react-router-dom";
import { useAddSession } from "../../../../../../api/session";
import { useQueryClient } from "react-query";
import { useTranslation } from "react-i18next";
import { TERM_OBJECT_KEY } from "../../../../../../config/AppKey";
import { getLocalStorage } from "../../../../../../utils/LocalStorage";

const ModalForm: React.FC = () => {
  const { isOpen, setIsOpen } = useModalState((state) => state);
  const { object_to_edit, set_object_to_edit } = useObjectToEdit(
    (state) => state,
  );
  const { edu_class_id } = useParams();
  const term_id = getLocalStorage(TERM_OBJECT_KEY)?.id;

  const { mutate, isSuccess, isLoading } = useAddSession();
  const queryClient = useQueryClient();

  useEffect(() => {
    if (isSuccess) {
      setIsOpen("isSuccess");
      queryClient.invalidateQueries(["summary"]);
    }
  }, [setIsOpen, isSuccess, queryClient]);

  const handleSubmit = (values: any) => {
    const Data_To_Send = {
      subject_id: values?.subject_id,
      edu_class_id: edu_class_id,
      term_id: term_id,
      day: object_to_edit?.day,
      teacher_id: values?.teacher_id,
      from: "",
      order: object_to_edit?.order,
      to: "",
    };
    Data_To_Send["from"] = values?.from?.format("HH:mm");
    Data_To_Send["to"] = values?.to?.format("HH:mm");
    //   console.log(Data_To_Send,"Data_To_Send");

    // console.log(Data_To_Send,"Data_To_Send");

    mutate(Data_To_Send);
  };

  const handleCancel = () => {
    setIsOpen("");
    set_object_to_edit({});
  };
  const [t] = useTranslation();

  return (
    <>
      <Modal
        className="ModalForm"
        centered
        width={"60vw"}
        footer={null}
        open={isOpen === ModalEnum?.PROGRAMME_ADD}
        onCancel={handleCancel}
      >
        <FormikForm
          handleSubmit={handleSubmit}
          initialValues={getInitialValues([])}
          validationSchema={getValidationSchema}
        >
          <header>{t("header.add_session")} </header>
          <main className="main_modal w-100">
            <ModelBody />
            <div className="buttons">
              <div onClick={handleCancel}> {t("practical.back")}</div>
              <button disabled={isLoading} type="submit">
                {t("practical.add")}
                {isLoading && (
                  <span className="Spinier_Div">
                    <Spin />
                  </span>
                )}
              </button>
            </div>
          </main>
        </FormikForm>
      </Modal>
    </>
  );
};

export default ModalForm;
