"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.cssClass = void 0;
var classnames = require("classnames");
var React = require("react");
var PropTypes = require("prop-types");
var tablePropTypes = require("./tablePropTypes");
var Cell_1 = require("./Cell");
var Button_1 = require("../Button/Button");
var Table_1 = require("./Table");
require("./Footer.less");
exports.cssClass = {
    BUTTON_PAGE: "Table--footer--button--page",
    BUTTON_PAGE_SELECTED: "Table--footer--button--page--selected",
    BUTTON_SCROLL: "Table--footer--button--scroll",
    CELL: "Table--footer--cell",
    CONTAINER: "Table--footer",
    ELLIPSIS: "Table--footer--ellipsis",
    PAGE_NUMBERS: "Table--footer--page_numbers",
    ROW: "Table--footer--row",
    LOADING_CONTAINER: "Table--footer--loadingContainer",
    LOADING_PILL: "Table--footer--loadingPill",
};
/**
 * Pagination footer for the Table component.
 * Only rendered if there are at least 2 pages of data available.
 */
function Footer(_a) {
    var currentPage = _a.currentPage, numColumns = _a.numColumns, numPages = _a.numPages, onPageChange = _a.onPageChange, showLastPage = _a.showLastPage, isLoading = _a.isLoading, lengthUnknown = _a.lengthUnknown, visiblePageRangeSize = _a.visiblePageRangeSize;
    var renderEllipsis = function () { return React.createElement("span", { className: exports.cssClass.ELLIPSIS }, "\u2026"); };
    var selectPage = function (page) {
        if (page === currentPage) {
            return;
        }
        onPageChange(page);
    };
    if (numPages < 2 && !lengthUnknown && !isLoading) {
        return null;
    }
    // As a safeguard for when the typescript PageSizeNumber type is not enforced (jsx files),
    // check if the visiblePageRangeSize is a valid PageSizeNumber (1, 3, 5, 7, 9),
    // and if not, set it to the default value.
    var safeVisiblePageRangeSize = visiblePageRangeSize;
    if (visiblePageRangeSize < 1 || visiblePageRangeSize > 11 || visiblePageRangeSize % 2 === 0) {
        safeVisiblePageRangeSize = Table_1.DEFAULT_VISIBLE_PAGE_RANGE_SIZE;
    }
    // Find the widest possible number range <= `safeVisiblePageRangeSize`.
    var pageNumberPadding = (safeVisiblePageRangeSize - 1) / 2;
    var pageNumStart;
    if (currentPage + pageNumberPadding >= numPages) {
        pageNumStart = Math.max(numPages - (safeVisiblePageRangeSize - 1), 1);
    }
    else {
        pageNumStart = Math.max(currentPage - pageNumberPadding, 1);
    }
    var pageNumEnd = Math.min(pageNumStart + (safeVisiblePageRangeSize - 1), numPages);
    var visibleRange = [];
    for (var i = pageNumStart; i <= pageNumEnd; i++) {
        visibleRange.push(i);
    }
    return (React.createElement("tfoot", { className: exports.cssClass.CONTAINER },
        React.createElement("tr", { className: exports.cssClass.ROW },
            React.createElement(Cell_1.default, { className: exports.cssClass.CELL, colSpan: numColumns },
                isLoading && (React.createElement("div", { className: exports.cssClass.LOADING_CONTAINER },
                    React.createElement("div", { className: exports.cssClass.LOADING_PILL }, "Loading..."))),
                React.createElement("div", null,
                    React.createElement(Button_1.Button, { className: exports.cssClass.BUTTON_SCROLL, disabled: currentPage === 1, onClick: function () { return selectPage(currentPage - 1); }, type: "link", size: "small", value: "Prev" }),
                    React.createElement("div", { className: exports.cssClass.PAGE_NUMBERS },
                        visibleRange[0] > 1 && (React.createElement(Button_1.Button, { className: exports.cssClass.BUTTON_PAGE, key: 1, onClick: function () { return selectPage(1); }, type: "link", size: "small", value: "1" })),
                        visibleRange[0] > 2 && renderEllipsis(),
                        visibleRange.map(function (pageNumber) { return (React.createElement(Button_1.Button, { className: classnames(exports.cssClass.BUTTON_PAGE, pageNumber === currentPage && exports.cssClass.BUTTON_PAGE_SELECTED), key: pageNumber, onClick: function () { return selectPage(pageNumber); }, type: "link", size: "small", value: "" + pageNumber })); }),
                        (visibleRange[safeVisiblePageRangeSize - 1] < numPages - 1 || lengthUnknown) &&
                            renderEllipsis(),
                        visibleRange[safeVisiblePageRangeSize - 1] < numPages && showLastPage && (React.createElement(Button_1.Button, { className: exports.cssClass.BUTTON_PAGE, key: numPages, onClick: function () { return selectPage(numPages); }, type: "link", size: "small", value: "" + numPages }))),
                    React.createElement(Button_1.Button, { className: exports.cssClass.BUTTON_SCROLL, disabled: currentPage === numPages && !lengthUnknown, onClick: function () { return selectPage(currentPage + 1); }, type: "link", size: "small", value: "Next" }))))));
}
exports.default = Footer;
Footer.propTypes = {
    currentPage: tablePropTypes.pageNumber.isRequired,
    onPageChange: PropTypes.func,
    numColumns: PropTypes.number.isRequired,
    numPages: PropTypes.number.isRequired,
    showLastPage: PropTypes.bool,
    isLoading: PropTypes.bool,
    lengthUnknown: PropTypes.bool,
    visiblePageRangeSize: PropTypes.number,
};
Footer.defaultProps = {
    onPageChange: function () { },
    showLastPage: true,
};
