import { useTranslation } from "react-i18next";
import { lazy, Suspense } from 'react';
import { Spin } from "antd";
import { useParams } from "react-router-dom";
import { ParamsEnum } from "../../enums/params";
import { useGetAllSubject } from "../../api/subject";
import useSetPage_title from "../../Hooks/useSetPageTitle";

const Table = lazy(() => import('./Table'));
const AddModalForm = lazy(() => import('./Model/AddModel'));
const EditModalForm = lazy(() => import('./Model/EditModel'));
const DeleteModels = lazy(() => import('./Model/Delete'));

const TableHeader = () => {
  const [t] = useTranslation();
  
  const { subject_id} = useParams<ParamsEnum>();

  const { data: Subject } = useGetAllSubject({
    show:subject_id
  });


  const SubjectName = Subject?.data?.name ?? "";

  useSetPage_title(
    t(`page_header.subject`) +
      "/" +
      t(`${SubjectName}`),
  );

  return (
    <div className="TableWithHeader">
      <Suspense fallback={<Spin/>}>
      <header>
        <h6>
          {t("models.units")} {SubjectName}
        </h6>

      </header>
        <Table />
        <AddModalForm />
      <EditModalForm />
      <DeleteModels />
      </Suspense>

    </div>
  );
};

export default TableHeader;