import { FaPlus } from "react-icons/fa";

import useModalHandler from "../../utils/useModalHandler";
import { ModalEnum } from "../../enums/Model";

// import useSetPage_title from "../../Hooks/useSetPageTitle";
import { useTranslation } from "react-i18next";
import { ABILITIES_ENUM, ABILITIES_VALUES_ENUM } from "../../enums/abilities";
import { hasAbility } from "../../utils/hasAbility";

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 DeleteModalForm = lazy(() => import('./Model/Delete'));
const SearchField = lazy(() => import('../../Components/DataTable/SearchField'));


const TableHeader = () => {
  const { handel_open_model } = useModalHandler();
  const [t] = useTranslation();
  // useSetPage_title(`${t(ABILITIES_ENUM?.MAIN_PAGE)}  / ${t(`models.${ABILITIES_ENUM.TEACHER}`)}`);
  const can_add_TEACHER = hasAbility(ABILITIES_ENUM.TEACHER, ABILITIES_VALUES_ENUM.STORE);

  return (
    <div className="TableWithHeader">
      
            <Suspense fallback={<Spin/>}>
      <header className="d-flex justify-content-between">
        <SearchField searchBy="name" placeholder={t("practical.search_here")} />

        {can_add_TEACHER && (
          <div className="Selects">
            <button
              onClick={() => handel_open_model(ModalEnum?.TEACHER_ADD)}
              className="add_button"
            >
              {t("practical.add")} {t("models.teacher")} <FaPlus />
            </button>
          </div>
        )}
      </header>

      
        <Table />
        <DeleteModalForm />
        <AddModalForm />
        <EditModalForm />
      </Suspense>
    </div>
  );
};

export default TableHeader;
