import Table from "./TablePage";
import SearchField from "../../../../../Components/DataTable/SearchField";
import { useLocation, useNavigate } from "react-router-dom";
import CustomSelect from "./Select/CustomSelect";
import EditHomeWorkModel from "./Model/EditModel";
import AddHomeWorkModel from "./Model/AddModel";
import DeleteHomeWorkModel from "./Model/Delete";

import type { DatePickerProps } from "antd";
import { DatePicker } from "antd";
import dayjs from "dayjs";
import { useObjectToEdit } from "../../../../../zustand/ObjectToEditState";
import { Payments } from "../../../../../types/App";
import { useTranslation } from "react-i18next";
import { translateOptions } from "../../../../../utils/translatedOptions";
import CustomDatePicker from "../../../../../Components/Ui/Custom/CustomDatePicker";

const TableHeader = () => {
  const [t] = useTranslation();


  const translateArray = translateOptions(
    [...Payments, { label: t("select.Payments.all_payment"), value: "" }],
    t,
  );

  return (
    <div className="TableWithHeader">
      <header>
        <h6>
          {t("models.payment")} {t("models.students")}
        </h6>
        <div className="Selects">
          <CustomSelect
            options={translateArray}
            placeholder={t("select.Payments.all_payment")}
            searchBy="type"
          />
       <CustomDatePicker/>
        </div>
      </header>
      <SearchField
        searchBy="student_name_payment"
        placeholder={t("practical.search_here")}
      />

      <Table />

      <AddHomeWorkModel />
      <EditHomeWorkModel />
      <DeleteHomeWorkModel />
    </div>
  );
};

export default TableHeader;
