import React, { useEffect } from "react";
import { Modal, Spin } from "antd";
import { useModalState } from "../../../zustand/Modal";
import FormikForm from "../../../Layout/Dashboard/FormikFormModel";
import ModelBody from "./Edit";
import { getInitialValues, getValidationSchema } from "./formUtil";
import { ModalEnum } from "../../../enums/Model";
import { useObjectToEdit } from "../../../zustand/ObjectToEditState";
import { useUpdateTeacher } from "../../../api/teacher";
import { useTranslation } from "react-i18next";
import ModelButtons from "../../../Components/models/ModelButtons";

const ModalForm: React.FC = () => {
  const { isOpen, setIsOpen } = useModalState((state) => state);
  const { object_to_edit, set_object_to_edit } = useObjectToEdit(
    (state) => state,
  );
  const { mutate, isSuccess, isLoading } = useUpdateTeacher();
  // console.log(object_to_edit,"object_to_edit");
  const handleSubmit = (values: any) => {
    // const contactInformationJson = JSON.stringify({
    //     phone_number: values?.number
    // });
    mutate({
      id: values?.id,
      name: values?.name,
      contact_information: values?.number,
      address: values?.address,
    });
  };
  const handleCancel = () => {
    setIsOpen("");
    set_object_to_edit({});
  };

  useEffect(() => {
    if (isSuccess) {
      setIsOpen("");
    }
  }, [setIsOpen, isSuccess]);
  const [t] = useTranslation();
  return (
    <Modal
      className="ModalForm"
      centered
      width={"60vw"}
      footer={null}
      open={isOpen === ModalEnum?.TEACHER_EDIT}
      onCancel={handleCancel}
    >
      {object_to_edit && (
        <FormikForm
          handleSubmit={handleSubmit}
          initialValues={getInitialValues(object_to_edit)}
          validationSchema={getValidationSchema}
        >
          <header>
            {" "}
            {t("practical.edit")} {t("practical.details")} {t("models.teacher")}{" "}
          </header>
          <main className="main_modal w-100">
            <ModelBody />
            <ModelButtons isLoading={isLoading} />

          </main>
        </FormikForm>
      )}
    </Modal>
  );
};

export default ModalForm;