import Table from "./TablePage";
import { useParams } from "react-router-dom";
import EditModel from "./Model/EditModel";

import type { DatePickerProps } from "antd";
import { DatePicker } from "antd";
import dayjs from "dayjs";
import { useObjectToEdit } from "../../../zustand/ObjectToEditState";
import { useGetStudent } from "../../../api/student";
import { Cycle, Student } from "../../../types/Item";
import { CYCLE_OBJECT_KEY } from "../../../config/AppKey";
import customParseFormat from "dayjs/plugin/customParseFormat";
// import useSetPage_title from "../../../Hooks/useSetPageTitle";
import { useTranslation } from "react-i18next";
import { ABILITIES_ENUM } from "../../../enums/abilities";

dayjs.extend(customParseFormat);
const TableHeader = () => {
  const { student_id } = useParams();
  const { data } = useGetStudent({
    show: student_id,
  });

  const student = data?.data as Student;
  console.log(data?.data, "data");

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

  const { set_param_to_send, param_to_send } = useObjectToEdit();

  const onChange: DatePickerProps["onChange"] = (date, dateString) => {
    // console.log(date, dateString);
    const newObj = { ...param_to_send };
    newObj.date = dateString;
    set_param_to_send(newObj);
  };

  const Today = new Date() as any;
  const cycle_object = localStorage?.getItem(CYCLE_OBJECT_KEY) as any;
  const schoolYear = JSON.parse(cycle_object) as Cycle;

  const startingYear = new Date(schoolYear.starting_date);
  const endingYear = new Date(schoolYear.ending_date);
  const dateFormat = "YYYY-MM";

  const [t] = useTranslation();
  // useSetPage_title(
  //   `${t(ABILITIES_ENUM?.MAIN_PAGE)}  / ${t(`models.student`)} / ${t(`practical.status`)}`,
  // );

  return (
    <div className="TableWithHeader">
      <header>
        <h6>
          {t("header.student_status")}
          {full_name}
        </h6>
        <div className="Selects">
          <div className="CustomDatePicker">
            <DatePicker
              defaultValue={dayjs(Today)}
              placeholder={t(`input.select_date`)}
              onChange={onChange}
              format={"YYYY/MM"}
              minDate={dayjs(
                dayjs(startingYear).format(dateFormat),
                dateFormat,
              )}
              maxDate={dayjs(dayjs(endingYear).format(dateFormat), dateFormat)}
              picker="month"
            />
          </div>
        </div>
      </header>

      <Table student={student} />

      <EditModel />
    </div>
  );
};

export default TableHeader;
