import { Payments } from "../../types/App";
import { useTranslation } from "react-i18next";
// import useSetPage_title from "../../Hooks/useSetPageTitle";
import { ABILITIES_ENUM } from "../../enums/abilities";
import { translateOptions } from "../../utils/translatedOptions";
import { ModalEnum } from "../../enums/Model";
import { useDeletePayment } from "../../api/payment";


import { lazy, Suspense } from 'react';
import { Spin } from "antd";

const Table = lazy(() => import('./Table'));
const AddModalForm = lazy(() => import('./Model/AddModel'));
const EditModalForm = lazy(() => import('./Model/EditModel'));
const DeleteModels = lazy(() => import('../../Layout/Dashboard/DeleteModels'));
const SearchField = lazy(() => import('../../Components/DataTable/SearchField'));
const CustomSelect = lazy(() => import("./Select/CustomSelect"));
const CustomDatePicker = lazy(() => import("../../Components/Ui/Custom/CustomDatePicker"));



const TableHeader = () => {
  const [t] = useTranslation();
  // useSetPage_title(`${t(ABILITIES_ENUM?.MAIN_PAGE)}  / ${t(`models.${ABILITIES_ENUM.PAYMENT}`)}`);

  const translateArray = translateOptions(
    [...Payments, { label: t("select.Payments.all_payment"), value: "" }],
    t,
  );

  const deleteMutation = useDeletePayment();
  return (
    <div className="TableWithHeader">
      <Suspense fallback={<Spin/>}>

      <header>
        <h6>
          {t("models.payment")} {t("models.students")}
        </h6>
        <div className="Selects">
          <CustomSelect
            options={translateArray}
            placeholder={t("select.Payments.all_payment")}
            searchBy="type"
          />
        <CustomDatePicker/>
        </div>
      </header>
      <SearchField searchBy="q" placeholder={t("practical.search_here")} />
  

        <Table />

      <DeleteModels
        modalType={ModalEnum.PAYMENT_DELETE}
        objectType="payment"
        deleteMutation={deleteMutation}
        objectValue="value"
      />        <AddModalForm />
        <EditModalForm />
      </Suspense>

    </div>
  );
};

export default TableHeader;
