import { __rest } from '../../../_virtual/_tslib.js';
import React__default, { useMemo } from 'react';
import { Dropdown } from '../../Field/dropdown/Dropdown.js';
import { PaginationText } from '../styles.js';
import { getNumberOfPages } from '../utils.js';
import { getId } from '../../../utils/index.js';

const NarrowPagination = (_a) => {
    var { totalItems, rowsPerPage, narrowPaginationText = {
        indicator: 'Page',
        preposition: 'of',
    }, currentPage, onChangePage } = _a, props = __rest(_a, ["totalItems", "rowsPerPage", "narrowPaginationText", "currentPage", "onChangePage"]);
    const appendTestId = getId(props['data-testid']);
    const appendTrackId = getId(props['data-trackid']);
    const numberOfPages = getNumberOfPages(totalItems, rowsPerPage);
    const pageNumbersMappedToOptions = useMemo(() => Array(numberOfPages)
        .fill(null)
        .map((_, i) => {
        const page = i + 1;
        return {
            value: page,
            label: page.toString(),
        };
    }), [numberOfPages]);
    return (React__default.createElement(React__default.Fragment, null,
        React__default.createElement(PaginationText, null, narrowPaginationText.indicator),
        React__default.createElement(Dropdown, { variant: "small", options: pageNumbersMappedToOptions, onChange: (e) => onChangePage(Number(e.value)), value: { value: currentPage, label: currentPage.toString() }, noMargin: true, width: "82px", "data-testid": appendTestId(), "data-trackid": appendTrackId() }),
        React__default.createElement(PaginationText, null,
            narrowPaginationText.preposition,
            " ",
            numberOfPages)));
};

export { NarrowPagination as default };
