"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var WidgetBase_1 = require("@dojo/framework/core/WidgetBase");
var I18n_1 = require("@dojo/framework/core/mixins/I18n");
var Themed_1 = require("@dojo/framework/core/mixins/Themed");
var vdom_1 = require("@dojo/framework/core/vdom");
var Grid_1 = require("./nls/Grid");
var fixedCss = require("./styles/paginated-footer.m.css");
var css = require("../theme/default/grid-paginated-footer.m.css");
var PaginatedFooter = /** @class */ (function (_super) {
    tslib_1.__extends(PaginatedFooter, _super);
    function PaginatedFooter() {
        return _super !== null && _super.apply(this, arguments) || this;
    }
    PaginatedFooter.prototype._renderPageControl = function (page) {
        var _a = this.properties, onPageChange = _a.onPageChange, currentPage = _a.page;
        var format = this.localizeBundle(Grid_1.default).format;
        var active = page === currentPage;
        return vdom_1.v('button', {
            key: active ? 'current' : "" + page,
            disabled: active,
            onclick: function () {
                onPageChange(page);
            },
            'aria-current': active ? 'page' : undefined,
            'aria-label': active
                ? format('currentPage', { page: page })
                : format('goToPage', { page: page }),
            classes: [this.theme(css.pageNumber), active && this.theme(css.active)]
        }, ["" + page]);
    };
    PaginatedFooter.prototype._renderPaginationControls = function (totalPages) {
        var page = this.properties.page;
        if (page < 4) {
            return [
                this._renderPageControl(1),
                totalPages > 1 && this._renderPageControl(2),
                totalPages > 2 && this._renderPageControl(3),
                totalPages > 3 && this._renderPageControl(4),
                totalPages > 4 && this._renderPageControl(5),
                totalPages > 5 &&
                    vdom_1.v('span', {
                        key: 'more',
                        'aria-hidden': 'true',
                        classes: [this.theme(css.more), fixedCss.moreFixed]
                    }, ['...']),
                totalPages > 5 && this._renderPageControl(totalPages)
            ];
        }
        else if (page > totalPages - 3) {
            return [
                this._renderPageControl(1),
                vdom_1.v('span', {
                    key: 'less',
                    'aria-hidden': 'true',
                    classes: [this.theme(css.more), fixedCss.moreFixed]
                }, ['...']),
                this._renderPageControl(totalPages - 4),
                this._renderPageControl(totalPages - 3),
                this._renderPageControl(totalPages - 2),
                this._renderPageControl(totalPages - 1),
                this._renderPageControl(totalPages)
            ];
        }
        else {
            return [
                this._renderPageControl(1),
                vdom_1.v('span', {
                    key: 'less',
                    'aria-hidden': 'true',
                    classes: [this.theme(css.more), fixedCss.moreFixed]
                }, ['...']),
                this._renderPageControl(page - 1),
                this._renderPageControl(page),
                this._renderPageControl(page + 1),
                vdom_1.v('span', {
                    key: 'more',
                    'aria-hidden': 'true',
                    classes: [this.theme(css.more), fixedCss.moreFixed]
                }, ['...']),
                this._renderPageControl(totalPages)
            ];
        }
    };
    PaginatedFooter.prototype.render = function () {
        var _a = this.properties, onPageChange = _a.onPageChange, page = _a.page, total = _a.total, pageSize = _a.pageSize;
        var _b = this.localizeBundle(Grid_1.default), format = _b.format, messages = _b.messages;
        if (total === undefined) {
            return vdom_1.v('div', { classes: [this.theme(css.root), fixedCss.rootFixed] });
        }
        var totalPages = Math.ceil(total / pageSize);
        var from = page === 1 ? '1' : "" + ((page - 1) * pageSize + 1);
        var to = page === 1 ? pageSize : page * pageSize;
        var controls = total ? this._renderPaginationControls(totalPages) : [];
        return vdom_1.v('div', { classes: [this.theme(css.root), fixedCss.rootFixed] }, [
            vdom_1.v('div', {
                classes: [
                    fixedCss.containerFixed,
                    this.theme(css.details),
                    fixedCss.detailsFixed
                ]
            }, [
                total
                    ? format('resultRange', {
                        from: from,
                        to: total < to ? total : to,
                        total: total
                    })
                    : messages.noResults
            ]),
            vdom_1.v('nav', {
                role: 'navigation',
                'aria-label': messages.pagination,
                classes: [this.theme(css.pagination)]
            }, [
                vdom_1.v('ul', {
                    classes: [
                        fixedCss.containerFixed,
                        this.theme(css.paginationList),
                        fixedCss.paginationListFixed
                    ]
                }, [
                    vdom_1.v('li', { classes: [fixedCss.itemFixed, this.theme(css.item)] }, tslib_1.__spread([
                        totalPages > 1 &&
                            vdom_1.v('button', {
                                key: 'previous',
                                disabled: page === 1,
                                onclick: function () {
                                    onPageChange(page - 1);
                                },
                                'aria-label': format('goToPage', { page: page - 1 }),
                                classes: [
                                    this.theme(css.pageNav),
                                    fixedCss.pageNavFixed
                                ]
                            }, ['<'])
                    ], controls, [
                        totalPages > 1 &&
                            vdom_1.v('button', {
                                key: 'next',
                                disabled: page === totalPages,
                                onclick: function () {
                                    onPageChange(page + 1);
                                },
                                'aria-label': format('goToPage', { page: page + 1 }),
                                classes: [
                                    this.theme(css.pageNav),
                                    fixedCss.pageNavFixed
                                ]
                            }, ['>'])
                    ]))
                ])
            ])
        ]);
    };
    PaginatedFooter = tslib_1.__decorate([
        Themed_1.theme(css)
    ], PaginatedFooter);
    return PaginatedFooter;
}(I18n_1.default(Themed_1.ThemedMixin(WidgetBase_1.WidgetBase))));
exports.default = PaginatedFooter;

/*# sourceMappingURL=PaginatedFooter.js.map*/