import Table from "./TablePage";
import { FaPlus } from "react-icons/fa";
import SearchField from "../../../Components/DataTable/SearchField";

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

import AddModalForm from "./Model/AddModel";
import EditModalForm from "./Model/EditModel";
import DeleteModalForm from "./Model/Delete";
// 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";

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

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

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

      <Table />

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

export default TableHeader;
