import { useTranslation } from "react-i18next";
import useSetPageTitle from "../../../../Hooks/useSetPageTitle";
import PageHeader from "../../../../Layout/Dashboard/PageHeader";
import { Suspense, useEffect } from "react";
import { Spin } from "antd";
import { ModalEnum } from "../../../../enums/Model";
import PersonalDetailsForm from "../Form/PersonalDetailsForm";
import { Formik, Form } from "formik";
import {
  getInitialValues,
  getInitialValuesEdit,
  getValidationSchema,
} from "../Form/formUtils";
import TitleDetailsForm from "../Form/TitleDetailsForm";
import AttachmentForm from "../Form/AttachmentForm";
import useModalHandler from "../../../../utils/useModalHandler";
import { useObjectToEdit } from "../../../../zustand/ObjectToEditState";
import { useUpdateReseller } from "../../../../api/reseller";
import { useNavigate } from "react-router-dom";
import { QueryStatusEnum } from "../../../../enums/QueryStatus";

const TableHeader = ({
  canEdit,
  ModelAbility,
}: {
  canEdit?: any;
  ModelAbility?: any;
}) => {
  const [t] = useTranslation();
  const { objectToEdit, setObjectToEdit } = useObjectToEdit();
  const { mutate, isSuccess, status } = useUpdateReseller();
  const Navigate = useNavigate();

  useSetPageTitle(t(`page_header.add_reseller`));

  const handleSubmit = (values: any) => {
    const DataToSend = {
      ...values,
      location: {
        lat: values.lat,
        lng: values.lng,
      },
    };

    if (values.username === objectToEdit?.user?.username) {
      delete DataToSend.username;
    }
    mutate(DataToSend);
  };
  useEffect(() => {
    if (isSuccess === true) {
      console.log(1);
      Navigate("/reseller");
    }
  }, [isSuccess]);

  return (
    <div className="TableWithHeader">
      <Suspense fallback={<Spin />}>
        <PageHeader
          pageTitle="edit_reseller"
          ModelAbility={ModalEnum?.RE_SELLER_EDIT}
          canAdd={false}
        />
        <div>
          <Formik
            initialValues={getInitialValuesEdit(objectToEdit)}
            validationSchema={getValidationSchema}
            onSubmit={handleSubmit}
          >
            {({ dirty }) => (
              <Form className="Form_details_container">
                <PersonalDetailsForm isEdit={true} />
                <TitleDetailsForm />
                <AttachmentForm />
                <div className="resellerButton">
                  <button type="button" onClick={() => Navigate("/reseller")}>
                    {t("practical.cancel")}
                  </button>
                  <button type="submit" disabled={!dirty}>
                    {t("practical.edit")} {t("models.reseller")}
                    {status === QueryStatusEnum.LOADING && (
                      <span className=" reseller_spinner_div">
                        <Spin />
                      </span>
                    )}
                  </button>
                </div>
              </Form>
            )}
          </Formik>
        </div>
      </Suspense>
    </div>
  );
};

export default TableHeader;
