import { useColumns } from ".";
import { useLocation } from "react-router-dom";
import React from "react";
import { useObjectToEdit } from "../../../../../zustand/ObjectToEditState";
import { useGetAllNote } from "../../../../../api/note";
import DataTable from "../../../../../Layout/Dashboard/Table/DataTable";

const App: React.FC = () => {
  const [searchQuery, setSearchQuery] = React.useState<string>("");
  const [searchQueryType, setSearchQueryType] = React.useState<string>("");

  const location = useLocation();

  const { param_to_send } = useObjectToEdit();

  React.useEffect(() => {
    const searchParams = new URLSearchParams(location?.search);
    setSearchQuery(searchParams?.get("student_name_note") || "");
    setSearchQueryType(searchParams?.get("type") || "");
  }, [location, searchQuery, searchQueryType]);

  const response = useGetAllNote({
    student_name: searchQuery,
    // [param_to_send?.state ?? "all"] :  ,
    date: param_to_send?.date,
    notType: "attendence_note",
    type: searchQueryType,
    pagination: true,
  });

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

export default App;
