import { useColumns } from ".";
import { useLocation, useParams } from "react-router-dom";
import React from "react";
import { useObjectToEdit } from "../../../../../zustand/ObjectToEditState";
import dayjs from "dayjs";
import { useGetAllEarlyDeparture } from "../../../../../api/earlyDeparture";
import DataTable from "../../../../../Layout/Dashboard/Table/DataTable";

const App: React.FC = () => {
  const { edu_class_id } = useParams();
  const [searchQuery, setSearchQuery] = React.useState<string>("");
  const location = useLocation();

  const { param_to_send } = useObjectToEdit();

  React.useEffect(() => {
    const searchParams = new URLSearchParams(location?.search);
    setSearchQuery(searchParams?.get("student_name_early_departure") || "");
    // console.log(searchQuery,"searchQuery");
  }, [location, searchQuery]);
  let Today = new Date() as any;
  let dateToSend =
    param_to_send?.date === "today"
      ? dayjs(Today).format("YYYY-MM-DD")
      : param_to_send?.date ?? dayjs(Today).format("YYYY-MM-DD");

  const response = useGetAllEarlyDeparture({
    student_name: searchQuery,
    edu_class_id: edu_class_id,
    [param_to_send?.state ?? "all"]: dateToSend,
    date: dateToSend,
    pagination: true,
    status: "active",
  });

  return <DataTable response={response} useColumns={useColumns} />;
};

export default App;