'use client';
// TODO: abstract the `next/navigation` dependency out from this component
import { usePathname, useRouter } from 'next/navigation.js';
import { collectionDefaults } from 'payload/config';
import qs from 'qs';
import React from 'react';
import { Chevron } from '../../icons/Chevron/index.js';
import { useSearchParams } from '../../providers/SearchParams/index.js';
import { useTranslation } from '../../providers/Translation/index.js';
import * as PopupList from '../Popup/PopupButtonList/index.js';
import Popup from '../Popup/index.js';
const baseClass = 'per-page';
const defaultLimits = collectionDefaults.admin.pagination.limits;
export const PerPage = ({ handleChange, limit, limits = defaultLimits, modifySearchParams = true, resetPage = false })=>{
    const { searchParams } = useSearchParams();
    const router = useRouter();
    const pathname = usePathname();
    const { t } = useTranslation();
    return /*#__PURE__*/ React.createElement("div", {
        className: baseClass
    }, /*#__PURE__*/ React.createElement(Popup, {
        button: /*#__PURE__*/ React.createElement("div", {
            className: `${baseClass}__base-button`
        }, /*#__PURE__*/ React.createElement("span", null, t('general:perPage', {
            limit
        })), " ", /*#__PURE__*/ React.createElement(Chevron, {
            className: `${baseClass}__icon`
        })),
        horizontalAlign: "right",
        render: ({ close })=>/*#__PURE__*/ React.createElement(PopupList.ButtonGroup, null, limits.map((limitNumber, i)=>/*#__PURE__*/ React.createElement(PopupList.Button, {
                    className: [
                        `${baseClass}__button`,
                        limitNumber === Number(limit) && `${baseClass}__button-active`
                    ].filter(Boolean).join(' '),
                    key: i,
                    onClick: ()=>{
                        close();
                        if (handleChange) handleChange(limitNumber);
                        if (modifySearchParams) {
                            const search = qs.stringify({
                                ...searchParams,
                                limit: limitNumber,
                                page: resetPage ? 1 : searchParams.page
                            }, {
                                addQueryPrefix: true
                            });
                            router.replace(`${pathname}${search}`);
                        }
                    }
                }, limitNumber === Number(limit) && /*#__PURE__*/ React.createElement("div", {
                    className: `${baseClass}__chevron`
                }, /*#__PURE__*/ React.createElement(Chevron, {
                    direction: "right"
                })), " ", /*#__PURE__*/ React.createElement("span", null, limitNumber)))),
        size: "small"
    }));
};

//# sourceMappingURL=index.js.map