import Table from "./TablePage";
import SearchField from "../../../../../Components/DataTable/SearchField";
import { useLocation, useNavigate } 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 { usePage_titleState } from "../../../../../zustand/PageTitleState";
import { useTranslation } from "react-i18next";
import CustomDatePicker from "../../../../../Components/Ui/Custom/CustomDatePicker";

const TableHeader = () => {
  const { set_param_to_send, param_to_send } = useObjectToEdit();
  const navigate = useNavigate();
  const location = useLocation();
  const { title } = usePage_titleState((state) => state);

  const onChange: DatePickerProps["onChange"] = (date, dateString) => {
    console.log(date, dateString);
    const newObj = { ...param_to_send };
    newObj.date = dateString;
    set_param_to_send(newObj);
    navigate(
      `${location.pathname}?${param_to_send?.state ?? "all"}=${dateString}`,
    );
  };

  const [t] = useTranslation();
  const OptionsType = [
    {
      value: "all",
      label: t("select.Student_Type.all_students"),
    },
    {
      label: t("select.Student_Type.absence"),
      value: StudentStatusEnum?.ABSENCE,
    },
    {
      label: t("select.Student_Type.late_arrival"),
      value: StudentStatusEnum?.LATE_ARRIVAL,
    },
    {
      label: t("select.Student_Type.presence"),
      value: StudentStatusEnum?.PRESENCE,
    },
  ];

  const Today = new Date() as any;

  return (
    <div className="TableWithHeader">
      <header>
        <h6>
          {t("header.Attendance and absence of students")}
          {title}
        </h6>
        <div className="Selects">
          <CustomSelect
            options={OptionsType}
            placeholder={t("select.Student_Type.all_students")}
            searchBy="type"
          />
  <CustomDatePicker/>
        </div>
      </header>
      <SearchField
        searchBy="student_name"
        placeholder={t("practical.search_here")}
      />

      <Table />

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

export default TableHeader;
