var __assign = (this && this.__assign) || function () {
    __assign = Object.assign || function(t) {
        for (var s, i = 1, n = arguments.length; i < n; i++) {
            s = arguments[i];
            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
                t[p] = s[p];
        }
        return t;
    };
    return __assign.apply(this, arguments);
};
var __rest = (this && this.__rest) || function (s, e) {
    var t = {};
    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
        t[p] = s[p];
    if (s != null && typeof Object.getOwnPropertySymbols === "function")
        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
                t[p[i]] = s[p[i]];
        }
    return t;
};
import { ChevronLeft, ChevronRight } from '@procore/core-icons/dist';
import React from 'react';
import { useDeprecation } from '../../effects/Deprecation';
import Box from '../../layouts/Box';
import Flex from '../../layouts/Flex';
import { useI18nContext } from '../../state/I18n';
import { addSubcomponents } from '../../utils/addSubcomponents';
import { Button } from '../Button';
import { MenuImperative } from '../MenuImperative';
import { Typography } from '../Typography/Typography';
import { StyledButton, StyledContainer, StyledCurrentPage, StyledPageCount, } from './Pagination.styles';
import { PaginationSelect } from './PaginationSelect';
function noop() { }
var usePagination = function (_a) {
    var _b = _a.activePage, activePage = _b === void 0 ? 0 : _b, _c = _a.items, items = _c === void 0 ? 0 : _c, _d = _a.onSelectPage, onSelectPage = _d === void 0 ? function () { } : _d, _e = _a.perPage, perPage = _e === void 0 ? 0 : _e;
    var pages = Math.ceil(items / perPage);
    return {
        end: Math.min(activePage * perPage, items),
        isFirst: activePage === 1,
        isLast: activePage === pages,
        pages: pages,
        selectNext: function () { return onSelectPage(activePage + 1); },
        selectPage: function (selection) { return onSelectPage(selection.item); },
        selectPrev: function () { return onSelectPage(activePage - 1); },
        start: (activePage - 1) * perPage + 1,
    };
};
export var Container = React.forwardRef(function Container(props, ref) {
    return React.createElement(Flex, __assign({ ref: ref }, props, { alignItems: "center" }));
});
export var Footer = React.forwardRef(function Footer(props, ref) {
    return React.createElement(MenuImperative.Footer, __assign({ ref: ref }, props, { padding: "xs 0 sm 0" }));
});
export var Notation = React.forwardRef(function Notation(_a, ref) {
    var end = _a.end, items = _a.items, start = _a.start;
    var i18n = useI18nContext();
    return (React.createElement(Typography, { ref: ref, italic: true, color: "gray45" }, "".concat(start, "-").concat(end, " ").concat(i18n.t('core.pagination.interval'), " ").concat(items)));
});
export var Next = React.forwardRef(function Next(props, ref) {
    var i18n = useI18nContext();
    return (React.createElement(Button, __assign({ ref: ref }, props, { "aria-label": i18n.t('core.pagination.nextPage'), variant: "tertiary", icon: React.createElement(ChevronRight, null) })));
});
export var Prev = React.forwardRef(function Prev(props, ref) {
    var i18n = useI18nContext();
    return (React.createElement(Button, __assign({ ref: ref }, props, { "aria-label": i18n.t('core.pagination.prevPage'), variant: "tertiary", icon: React.createElement(ChevronLeft, null) })));
});
var Label = React.forwardRef(function Label(props, ref) {
    return React.createElement(Typography, __assign({}, props, { children: props.children, ref: ref }));
});
export var Field = React.forwardRef(function Field(_a, ref) {
    var children = _a.children, label = _a.label;
    var i18n = useI18nContext();
    return (React.createElement(React.Fragment, null,
        React.createElement(Label, null,
            label || i18n.t('core.pagination.page'),
            ":"),
        React.createElement(Box, { ref: ref, paddingLeft: "sm" }, children)));
});
/**

 We paginate pages that display large data sets to our users. This helps reduce
 page load time and makes the data easier to navigate.

 Pagination is commonly seen on tool landing pages, where we display 150 objects
 or table rows per page.

 @since 10.19.0

 @see [Storybook](https://procore.github.io/core/latest/?path=/story/demos-pagination--demo)

 @see [Design Guidelines](https://design.procore.com/pagination)

 */
export var Pagination_ = React.forwardRef(function Pagination(_a, ref) {
    var _b = _a.activePage, activePage = _b === void 0 ? 1 : _b, fieldLabel = _a.fieldLabel, items = _a.items, _c = _a.onSelectPage, onSelectPage = _c === void 0 ? noop : _c, _d = _a.perPage, perPage = _d === void 0 ? 50 : _d, props = __rest(_a, ["activePage", "fieldLabel", "items", "onSelectPage", "perPage"]);
    var _e = usePagination({
        activePage: activePage,
        items: items,
        onSelectPage: onSelectPage,
        perPage: perPage,
    }), end = _e.end, isFirst = _e.isFirst, isLast = _e.isLast, pages = _e.pages, selectNext = _e.selectNext, selectPage = _e.selectPage, selectPrev = _e.selectPrev, start = _e.start;
    useDeprecation({
        when: fieldLabel,
        oldThing: 'Pagination with prop fieldLabel',
        newThing: 'Pagination without prop fieldLabel and let the component handle i18n',
    });
    var i18n = useI18nContext();
    return (React.createElement(StyledContainer, __assign({ ref: ref }, props),
        React.createElement(StyledPageCount, { ref: ref, italic: true, color: "gray45" }, "".concat(start, "-").concat(end, " ").concat(i18n.t('core.pagination.interval'), " ").concat(items)),
        React.createElement(StyledCurrentPage, null,
            fieldLabel || i18n.t('core.pagination.page'),
            ":"),
        React.createElement(PaginationSelect, { activePage: activePage, disabled: pages <= 1, onSelect: selectPage, pages: pages }),
        React.createElement(StyledButton, { disabled: isFirst, variant: "tertiary", "aria-label": i18n.t('core.pagination.prevPage'), icon: React.createElement(ChevronLeft, null), onClick: selectPrev }),
        React.createElement(StyledButton, { disabled: isLast, variant: "tertiary", "aria-label": i18n.t('core.pagination.nextPage'), icon: React.createElement(ChevronRight, null), onClick: selectNext })));
});
Pagination_.displayName = 'Pagination';
Container.displayName = 'Pagination.Container';
Field.displayName = 'Pagination.Field';
Footer.displayName = 'Pagination.Footer';
Label.displayName = 'Pagination.Label';
Next.displayName = 'Pagination.Next';
Notation.displayName = 'Pagination.Notation';
Prev.displayName = 'Pagination.Prev';
export var Pagination = addSubcomponents({
    /**
     * @deprecated
     *
     * Pagination subcomponents will be removed in a future version
     *
     * @deprecatedSince 10.20.0
     */
    Container: Container,
    /**
     * @deprecated
     *
     * Pagination subcomponents will be removed in a future version
     *
     * @deprecatedSince 10.20.0
     */
    Field: Field,
    /**
     * @deprecated
     *
     * Pagination subcomponents will be removed in a future version
     *
     * @deprecatedSince 10.20.0
     */
    Footer: Footer,
    /**
     * @deprecated
     *
     * Pagination subcomponents will be removed in a future version
     *
     * @deprecatedSince 10.20.0
     */
    Label: Label,
    /**
     * @deprecated
     *
     * Please use <Button icon={\<ChevronRight /\>} variant="tertiary" />
     *
     * @deprecatedSince 10.20.0
     */
    Next: Next,
    /**
     * @deprecated
     *
     * Pagination subcomponents will be removed in a future version
     *
     * @deprecatedSince 10.20.0
     */
    Notation: Notation,
    /**
     * @deprecated
     *
     * Please use <Button icon={\<ChevronLeft /\>} variant="tertiary" />
     *
     * @deprecatedSince 10.20.0
     */
    Prev: Prev,
}, Pagination_);
export default Pagination;
//# sourceMappingURL=Pagination.js.map