import { useCallback, useState } from "react";
import { PAGE_SIZE } from "../constants";
import { useQuery } from "@tanstack/react-query";
import { STATUSES } from "../../../config";
import { api } from "../../../api";
import { useMergeTableData } from "../useMergeTableData";
import { Table } from "../Table";
import { columns } from "../InitialTable/columns";

export const WorkingTable = () => {
  const [pageSize, setPageSize] = useState(PAGE_SIZE);
  const [page, setPage] = useState(1);

  const { data } = useQuery(["working-points"], async () => {
    const params = new URLSearchParams({
      page,
      page_size: pageSize,
      "status[]": [STATUSES.working],
    });

    const { data } = await api.get(
      `/api/placement_points?${params.toString()}`
    );

    return data;
  });

  const { data: mergedData, isClickedPointLoading } = useMergeTableData(
    data,
    setPageSize
  );

  const handlePageChange = useCallback((page) => setPage(page), []);

  return (
    <Table
      data={mergedData}
      onPageChange={handlePageChange}
      page={page}
      pageSize={pageSize}
      isClickedPointLoading={isClickedPointLoading}
      columns={columns}
    />
  );
};