'use client';
import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
import React, { useCallback } from 'react';
import { useListQuery } from '../../providers/ListQuery/context.js';
import { PageControlsComponent } from './index.js';
/**
 * If `groupBy` is set in the query, multiple tables will render, one for each group.
 * In this case, each table needs its own `PageControls` to handle pagination.
 * These page controls, however, should not modify the global `ListQuery` state.
 * Instead, they should only handle the pagination for the current group.
 * To do this, build a wrapper around `PageControlsComponent` that handles the pagination logic for the current group.
 */ export const GroupByPageControls = ({ AfterPageControls, collectionConfig, data, groupByValue })=>{
    const { refineListData } = useListQuery();
    const handlePageChange = useCallback(async (page)=>{
        await refineListData({
            queryByGroup: {
                [groupByValue]: {
                    page
                }
            }
        });
    }, [
        refineListData,
        groupByValue
    ]);
    const handlePerPageChange = useCallback(async (limit)=>{
        await refineListData({
            queryByGroup: {
                [groupByValue]: {
                    limit,
                    page: 1
                }
            }
        });
    }, [
        refineListData,
        groupByValue
    ]);
    return /*#__PURE__*/ _jsxDEV(PageControlsComponent, {
        AfterPageControls: AfterPageControls,
        collectionConfig: collectionConfig,
        data: data,
        handlePageChange: handlePageChange,
        handlePerPageChange: handlePerPageChange
    }, void 0, false, {
        fileName: "src/elements/PageControls/GroupByPageControls.tsx",
        lineNumber: 54,
        columnNumber: 5
    }, this);
};

//# sourceMappingURL=GroupByPageControls.js.map