import { useColumns } from ".";
import { useLocation } from "react-router-dom";
import React from "react";
import { useGetAllMark } from "../../../../../api/mark";
import { useMarkState } from "../../../../../zustand/MarkState";
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 { HeaderData } = useMarkState();

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

  const response = useGetAllMark(
    {
      student_name: searchQuery,
      type: searchQueryType,
      exam_id: HeaderData?.id ?? "",
      pagination: true,
    },
    { enabled: !!HeaderData?.id },
  );

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

export default App;
