import { useColumns } from ".";

import { useLocation, useParams } from "react-router-dom";
import React from "react";
import { useGetAllPayment } from "../../../api/payment";
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();

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

  const { student_id } = useParams();

  const response = useGetAllPayment({
    student_id: student_id,
    type: searchQueryType,
    pagination: true,
  });

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

export default App;
