import Table from "./TablePage";
import SearchField from "../../../Components/DataTable/SearchField";
import { useLocation, useNavigate, useParams } from "react-router-dom";
import CustomSelect from "./Select/CustomSelect";
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 { notes } from "../../../types/App";
import { useGetStudent } from "../../../api/student";
import { Student } from "../../../types/Item";
import { useTranslation } from "react-i18next";
import { translateOptions } from "../../../utils/translatedOptions";
// import useSetPage_title from "../../../Hooks/useSetPageTitle";
import { ABILITIES_ENUM } from "../../../enums/abilities";
import CustomDatePicker from "../../../Components/Ui/Custom/CustomDatePicker";

const TableHeader = () => {
  const { student_id } = useParams();
  const { data } = useGetStudent({
    show: student_id,
  });
  const student = data?.data as Student;

  const full_name =
    " " + student?.full_name + " ( " + student?.course?.name + " )";

  const { set_param_to_send, param_to_send } = useObjectToEdit();
  const navigate = useNavigate();
  const location = useLocation();

  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 Today = new Date() as any;
  const [t] = useTranslation();
  const translateArray = translateOptions(
    [...notes, { label: t("select.Note.all_note"), value: "" }],
    t,
  );
  // useSetPage_title(
  //   `${t(ABILITIES_ENUM?.MAIN_PAGE)}  / ${t(`models.${ABILITIES_ENUM.NOTE}`)}`,
  // );

  return (
    <div className="TableWithHeader">
      <header>
        <h6>
          {t("models.note")}
          {full_name}
        </h6>
        <div className="Selects">
          <CustomSelect
            options={translateArray}
            placeholder={t("select.Note.all_note")}
            searchBy="type"
          />
            <CustomDatePicker/>
        </div>
      </header>
      <SearchField searchBy="note_name" placeholder={"practical.search_here"} />

      <Table student={student} />

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

export default TableHeader;
