import { ModalEnum } from '../../../enums/Model';
import useModalHandler from '../../../utils/useModalHandler';
import { FaPlus } from 'react-icons/fa';
import { useTranslation } from 'react-i18next';
import TablePage from './TablePage';
import AddSubjectModalForm from "../Model/AddModel";
import EditSubjectModalForm from "../Model/EditModel";
import useSetPageTitle from '../../../Hooks/useSetPageTitle';
import { canAddSubject } from '../../../utils/hasAbilityFn';
import DeleteModels from '../../../Layout/Dashboard/DeleteModels';
import { useDeleteSubject } from '../../../api/subject';


const TableWithHeader = () => {

  const { handel_open_model } = useModalHandler();
  const [t] = useTranslation();
  const deleteMutation = useDeleteSubject();

  useSetPageTitle(
    t(`page_header.subject`),
  );

  return (
    <div className="TableWithHeader">
    <header>
      <h4 className="Bold Primary ">{t("models.subject")}</h4>
      {canAddSubject && (
        <button
          onClick={() => handel_open_model(ModalEnum?.SUBJECT_ADD)}
          className="add_button"
        >
          {t("practical.add")} {t("models.subject")} <FaPlus />
        </button>
      )}
    </header>
    <TablePage />

    <AddSubjectModalForm />
      <EditSubjectModalForm />
      <DeleteModels
        deleteMutation={deleteMutation}
        ModelEnum={ModalEnum?.SUBJECT_DELETE}
        />
  </div>
  )
}

export default TableWithHeader