import Table from "./TablePage";
import SearchField from "../../../../../Components/DataTable/SearchField";
import { useGetAllEduClass } from "../../../../../api/eduClass";
import { useLocation, useNavigate, useParams } from "react-router-dom";
import CustomSelect from "./Select/CustomSelect";
import EditAbsenceModel from "./Model/EditModel";
import type { DatePickerProps } from "antd";
import { DatePicker } from "antd";
import dayjs from "dayjs";
import { useObjectToEdit } from "../../../../../zustand/ObjectToEditState";
import { StudentStatusEnum } from "../../../../../enums/Items";
import { useTranslation } from "react-i18next";
import CustomDatePicker from "../../../../../Components/Ui/Custom/CustomDatePicker";

const TableHeader = () => {
  const { edu_class_id } = useParams();
  const { data: edu_class } = useGetAllEduClass({
    show: edu_class_id,
  });
  const edu_class_name = edu_class?.data?.name || "";
  const course_name = edu_class?.data?.course?.name || "";
  const full_name = " " + course_name + " ( " + edu_class_name + " )";

  
  const [t] = useTranslation();

  const OptionsType = [
    {
      value: "all",
      label: t("select.Student_Type.all_students"),
    },
    {
      label: t("select.Student_Type.earlyDeparture"),
      value: StudentStatusEnum?.EARLY_DEPARTURE,
    },
  ];

  const Today = new Date() as any;

  return (
    <div className="TableWithHeader">
      <header>
        <h6>
          {t("header.earlyDepartures")}
          {full_name}
        </h6>
        <div className="Selects">
          <CustomSelect
            options={OptionsType}
            placeholder={t("select.Student_Type.all_students")}
            searchBy="type"
          />
          <CustomDatePicker/>
        
        </div>
      </header>

      <SearchField
        searchBy="student_name_early_departure"
        placeholder={t("practical.search_here")}
      />

      <Table />

      <EditAbsenceModel />
    </div>
  );
};

export default TableHeader;
