import * as tslib_1 from "tslib";
import { WidgetBase } from '@dojo/framework/core/WidgetBase';
import I18nMixin from '@dojo/framework/core/mixins/I18n';
import { ThemedMixin, theme } from '@dojo/framework/core/mixins/Themed';
import { v } from '@dojo/framework/core/vdom';
import bundle from './nls/Grid';
import * as fixedCss from './styles/paginated-footer.m.css';
import * as css from '../theme/default/grid-paginated-footer.m.css';
let PaginatedFooter = class PaginatedFooter extends I18nMixin(ThemedMixin(WidgetBase)) {
    _renderPageControl(page) {
        const { onPageChange, page: currentPage } = this.properties;
        const { format } = this.localizeBundle(bundle);
        const active = page === currentPage;
        return v('button', {
            key: active ? 'current' : `${page}`,
            disabled: active,
            onclick: () => {
                onPageChange(page);
            },
            'aria-current': active ? 'page' : undefined,
            'aria-label': active
                ? format('currentPage', { page })
                : format('goToPage', { page }),
            classes: [this.theme(css.pageNumber), active && this.theme(css.active)]
        }, [`${page}`]);
    }
    _renderPaginationControls(totalPages) {
        const { page } = this.properties;
        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 &&
                    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),
                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),
                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),
                v('span', {
                    key: 'more',
                    'aria-hidden': 'true',
                    classes: [this.theme(css.more), fixedCss.moreFixed]
                }, ['...']),
                this._renderPageControl(totalPages)
            ];
        }
    }
    render() {
        const { onPageChange, page, total, pageSize } = this.properties;
        const { format, messages } = this.localizeBundle(bundle);
        if (total === undefined) {
            return v('div', { classes: [this.theme(css.root), fixedCss.rootFixed] });
        }
        const totalPages = Math.ceil(total / pageSize);
        const from = page === 1 ? '1' : `${(page - 1) * pageSize + 1}`;
        const to = page === 1 ? pageSize : page * pageSize;
        const controls = total ? this._renderPaginationControls(totalPages) : [];
        return v('div', { classes: [this.theme(css.root), fixedCss.rootFixed] }, [
            v('div', {
                classes: [
                    fixedCss.containerFixed,
                    this.theme(css.details),
                    fixedCss.detailsFixed
                ]
            }, [
                total
                    ? format('resultRange', {
                        from,
                        to: total < to ? total : to,
                        total
                    })
                    : messages.noResults
            ]),
            v('nav', {
                role: 'navigation',
                'aria-label': messages.pagination,
                classes: [this.theme(css.pagination)]
            }, [
                v('ul', {
                    classes: [
                        fixedCss.containerFixed,
                        this.theme(css.paginationList),
                        fixedCss.paginationListFixed
                    ]
                }, [
                    v('li', { classes: [fixedCss.itemFixed, this.theme(css.item)] }, [
                        totalPages > 1 &&
                            v('button', {
                                key: 'previous',
                                disabled: page === 1,
                                onclick: () => {
                                    onPageChange(page - 1);
                                },
                                'aria-label': format('goToPage', { page: page - 1 }),
                                classes: [
                                    this.theme(css.pageNav),
                                    fixedCss.pageNavFixed
                                ]
                            }, ['<']),
                        ...controls,
                        totalPages > 1 &&
                            v('button', {
                                key: 'next',
                                disabled: page === totalPages,
                                onclick: () => {
                                    onPageChange(page + 1);
                                },
                                'aria-label': format('goToPage', { page: page + 1 }),
                                classes: [
                                    this.theme(css.pageNav),
                                    fixedCss.pageNavFixed
                                ]
                            }, ['>'])
                    ])
                ])
            ])
        ]);
    }
};
PaginatedFooter = tslib_1.__decorate([
    theme(css)
], PaginatedFooter);
export default PaginatedFooter;

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