import Table from "./TablePage";
// import Table from "./TestTableHeader";

import { FaPlus } from "react-icons/fa";
import SearchField from "../../../../../Components/DataTable/SearchField";
import useModalHandler from "../../../../../utils/useModalHandler";
import { ModalEnum } from "../../../../../enums/Model";
import { usePage_titleState } from "../../../../../zustand/PageTitleState";
import { useTranslation } from "react-i18next";
import StudentModalForm from "../../../../../Components/EduClass/student/Add/Model/Modal";

import TransformStudent from "./model/TransformStudent";
import MoveStudent from "./model/MoveStudent";
import { hasAbility } from "../../../../../utils/hasAbility";
import {
  ABILITIES_ENUM,
  ABILITIES_VALUES_ENUM,
} from "../../../../../enums/abilities";
const TableHeader = () => {
  const { handel_open_model } = useModalHandler();
  const { title } = usePage_titleState((state) => state);
  const [t] = useTranslation();
  const can_use_add_ability = hasAbility(
    ABILITIES_ENUM.STUDENT,
    ABILITIES_VALUES_ENUM.STORE,
  );
  const can_use_import_ability = hasAbility(
    ABILITIES_ENUM.STUDENT,
    ABILITIES_VALUES_ENUM.IMPORT_STUDENTS,
  );
  const can_use_move_ability = hasAbility(
    ABILITIES_ENUM.STUDENT,
    ABILITIES_VALUES_ENUM.MOVE_STUDENTS,
  );

  return (
    <div className="TableWithHeader">
      <header>
        <h6>
          {t("header.register_students")}
          {title}
        </h6>
        <div className="Selects">
          {can_use_import_ability && (
            <button
              onClick={() => handel_open_model(ModalEnum?.STUDENT_TRANSFORM)}
              className="add_button"
            >
              {t("header.import_students")}
            </button>
          )}
          {can_use_move_ability && (
            <button
              onClick={() => handel_open_model(ModalEnum?.STUDENT_MOVE)}
              className="add_button"
            >
              {t("header.move_student")}
            </button>
          )}

          {can_use_add_ability && (
            <button
              onClick={() => handel_open_model(ModalEnum?.STUDENT_ADD)}
              className="add_button"
            >
              {t("practical.add")} {t("models.student")} <FaPlus />
            </button>
          )}
        </div>
      </header>
      <SearchField searchBy="name" placeholder={t("practical.search_here")} />

      <Table />
      <StudentModalForm />
      <MoveStudent />
      <TransformStudent />
    </div>
  );
};

export default TableHeader;
