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, getValidationSchemaADD } from "./formUtil";
import { ModalEnum } from "../../../enums/Model";
import { useObjectToEdit } from "../../../zustand/ObjectToEditState";
import { useAddPayment } from "../../../api/payment";
import { useTranslation } from "react-i18next";
import ModelButtons from "../../../Components/models/ModelButtons";

const ModalForm: React.FC = () => {
  const { isOpen, setIsOpen } = useModalState((state) => state);
  const { mutate, isSuccess, isLoading } = useAddPayment();
  const { set_object_to_edit, object_to_edit } = useObjectToEdit();
  useEffect(() => {
    if (isSuccess) {
      setIsOpen("isSuccess");
      set_object_to_edit({});
    }
  }, [isSuccess, setIsOpen]);

  const handleSubmit = (values: any) => {
    const dataToSend = {
      ...values,
      date: "",
    };

    dataToSend["date"] = values?.date?.format("YYYY-MM-DD");
    set_object_to_edit(values);
    mutate(dataToSend);
    console.log(values);
  };

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

  return (
    <>
      <Modal
        className="ModalForm"
        centered
        width={"60vw"}
        footer={null}
        open={isOpen === ModalEnum?.PAYMENT_ADD}
        onCancel={handleCancel}
      >
        <FormikForm
          handleSubmit={handleSubmit}
          initialValues={getInitialValues(object_to_edit)}
          validationSchema={getValidationSchemaADD}
        >
          <header>
            {" "}
            {t("practical.add")} {t("models.payment")}{" "}
          </header>
          <main className="main_modal w-100">
            <ModelBody />
            <ModelButtons isLoading={isLoading} />
          </main>
        </FormikForm>
      </Modal>
    </>
  );
};

export default ModalForm;
