import { __rest } from '../../../_virtual/_tslib.js';
import React__default from 'react';
import { Ellipsis, PaginationButton } from '../styles.js';
import { getPageRangeList, getNumberOfPages } from '../utils.js';
import { getId } from '../../../utils/index.js';

const WidePagination = (_a) => {
    var { totalItems, rowsPerPage, currentPage, onChangePage, paginationLimiter = 3 } = _a, props = __rest(_a, ["totalItems", "rowsPerPage", "currentPage", "onChangePage", "paginationLimiter"]);
    const appendTestId = getId(props['data-testid']);
    const appendTrackId = getId(props['data-trackid']);
    const numberOfPages = getNumberOfPages(totalItems, rowsPerPage);
    const pageRange = getPageRangeList(currentPage, numberOfPages, paginationLimiter);
    const buttons = pageRange.map((page, index) => {
        if (page === -1) {
            return React__default.createElement(Ellipsis, { key: index }, "...");
        }
        return (React__default.createElement(PaginationButton, { key: index, "data-active": currentPage === page, onClick: () => onChangePage(page), "data-testid": appendTestId(`page-${page}`), "data-trackid": appendTrackId(`page-${page}`), role: "button" }, page));
    });
    return React__default.createElement(React__default.Fragment, null, buttons);
};

export { WidePagination as default };
