import { r as registerInstance, d as createEvent, h, H as Host, c as getElement } from './core-3f33e631.js';
import { P as PagerSizeOption } from './utils-3aef1637.js';
import { T as Tunnel } from './i18n.provider-106e9203.js';

const MAX_SHOWN_PAGES = 5;
const Pager = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
        this.pageCount = 1;
        /**
         * If true, the pager will allows users to jump to the first page and last page
         */
        this.firstLast = false;
        /**
         * If true, the pager will display the displayed record range and record total
         */
        this.info = false;
        /**
         * The current page
         */
        this.page = 1;
        /**
         * The number of results to show per page. Default is 20.
         */
        this.size = PagerSizeOption.Medium;
        this.anjPagerDidLoad = createEvent(this, "anjPagerDidLoad", 7);
        this.anjPage = createEvent(this, "anjPage", 7);
    }
    onPageChange() {
        this.calculateRange();
    }
    onSizeChange() {
        this.calculatePageCount();
    }
    onTotalChange(newVal, oldVal) {
        this.calculatePageCount();
        if (isNaN(oldVal) || isNaN(newVal))
            return;
        if (newVal < oldVal && this.page > this.pageCount) {
            this.page = this.pageCount;
        }
    }
    componentDidLoad() {
        this.calculatePageCount();
        this.anjPagerDidLoad.emit();
    }
    onSizeSelect({ detail }) {
        const previous = this.page;
        this.page = 1;
        this.size = detail.value;
        this.emitChange(previous);
    }
    calculatePageCount() {
        this.pageCount = this.total ? Math.ceil(this.total / this.size) : 1;
        this.calculateRange();
    }
    calculateRange() {
        const base = this.size * this.page;
        const last = this.total && base > this.total ? base - this.size + (this.total % this.size) : base;
        const first = base - this.size;
        this.range = [first, last];
    }
    onPage(page) {
        const previous = this.page;
        if (page !== this.page && page > 0 && page <= this.pageCount) {
            this.page = page;
            this.emitChange(previous);
        }
    }
    emitChange(prev) {
        this.anjPage.emit({ page: this.page, rangeMin: this.range[0], rangeMax: this.range[1], size: this.size, total: this.total, previousPage: prev });
    }
    generateInfo() {
        const from = this.numberFormatter((this.total) ? this.range[0] + 1 : 0);
        const to = this.numberFormatter((this.total) ? this.range[1] : 0);
        const total = this.numberFormatter(this.total);
        return `${from} - ${to} | ${total}`;
    }
    generatePages() {
        const pages = [];
        let min = this.page - 2 > 0 ? this.page - 2 : 1;
        if (min + MAX_SHOWN_PAGES > this.pageCount + 1) {
            min = this.pageCount + 1 - MAX_SHOWN_PAGES;
        }
        for (let i = min > 0 ? min : 1; i < this.pageCount + 1; i++) {
            pages.push(i);
            if (pages.length === 5) {
                break;
            }
        }
        return pages;
    }
    showSizes() {
        return this.sizes && this.sizes.length > 0;
    }
    pageButtons(pages) {
        const prevDisabled = this.page === 1;
        const nextDisabled = this.page === this.pageCount;
        const buttons = [
            h("anj-button", { context: "text", disabled: prevDisabled, onClick: () => this.onPage(this.page - 1), "aria-label": "Previous" }, h("svg", { slot: "icon-only", xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24" }, h("path", { d: "M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z" }))),
            pages.map(p => h("anj-button", { context: "text", class: "anj-page-number", disabled: p === this.page, active: p === this.page, onClick: () => this.onPage(p) }, this.numberFormatter(p))),
            h("anj-button", { context: "text", disabled: nextDisabled, onClick: () => this.onPage(this.page + 1), "aria-label": "Next" }, h("svg", { slot: "icon-only", xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24" }, h("path", { d: "M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z" })))
        ];
        if (this.firstLast) {
            buttons.unshift(h("anj-button", { context: "text", disabled: prevDisabled, onClick: () => this.onPage(1), "aria-label": "First" }, h("svg", { slot: "icon-only", xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24" }, h("path", { d: "M18.41 16.59L13.82 12l4.59-4.59L17 6l-6 6 6 6zM6 6h2v12H6z" }))));
            buttons.push(h("anj-button", { context: "text", disabled: nextDisabled, onClick: () => this.onPage(this.pageCount), "aria-label": "Last" }, h("svg", { slot: "icon-only", xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24" }, h("path", { d: "M5.59 7.41L10.18 12l-4.59 4.59L7 18l6-6-6-6zM16 6h2v12h-2z" }))));
        }
        return buttons;
    }
    render() {
        return (h(Host, { class: { 'anj-page-sizable': this.showSizes() } }, this.showSizes() ?
            h("div", { class: "anj-pager-group anj-page-sizer" }, h("anj-select", { value: this.size }, this.sizes.map(s => h("anj-option", { value: s }, s))), h("span", { class: "anj-page-text" }, "per page")) : undefined, h("div", { class: "anj-pager-group anj-page-buttons" }, this.info && this.range && this.total
            ? h("span", { class: "anj-pager-info" }, this.generateInfo())
            : undefined, this.pageButtons(this.generatePages()))));
    }
    get element() { return getElement(this); }
    static get watchers() { return {
        "page": ["onPageChange"],
        "size": ["onSizeChange"],
        "total": ["onTotalChange"]
    }; }
    static get style() { return ".sc-anj-pager-h {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex: 1;\n  flex: 1;\n  -ms-flex-flow: column-reverse;\n  flex-flow: column-reverse;\n  -ms-flex-pack: end;\n  justify-content: flex-end;\n  margin-top: 1rem;\n  text-align: right;\n}\n.sc-anj-pager-h .anj-pager-info.sc-anj-pager {\n  border-right: 1px solid transparent;\n  color: var(--anj-neutral-dark);\n  display: block;\n  margin-bottom: 0.5rem;\n  padding-right: 0.5rem;\n}\n\@media (min-width: 768px) {\n  .sc-anj-pager-h {\n    -ms-flex-flow: row wrap;\n    flex-flow: row wrap;\n  }\n  .anj-page-sizable.sc-anj-pager-h {\n    -ms-flex-pack: justify;\n    justify-content: space-between;\n  }\n  .anj-page-sizable.sc-anj-pager-h .anj-pager-group.sc-anj-pager:first-child {\n    -ms-flex: 0 0 25%;\n    flex: 0 0 25%;\n    max-width: 25%;\n    text-align: left;\n  }\n  .anj-page-sizable.sc-anj-pager-h .anj-pager-group.sc-anj-pager:last-child {\n    -ms-flex: 0 0 75%;\n    flex: 0 0 75%;\n    max-width: 75%;\n  }\n  .sc-anj-pager-h .anj-pager-info.sc-anj-pager {\n    border-right: 0;\n    display: inline;\n    margin: 0 0.5rem 0 0;\n    padding-right: 0;\n  }\n}\n.sc-anj-pager-h .anj-pager-group.sc-anj-pager {\n  -ms-flex: 0 0 100%;\n  flex: 0 0 100%;\n  max-width: 100%;\n}\n.sc-anj-pager-h .anj-pager-group.sc-anj-pager anj-button.sc-anj-pager {\n  margin: 0;\n}\n.sc-anj-pager-h .anj-pager-group.anj-page-sizer.sc-anj-pager {\n  border-left: 1px solid transparent;\n  border-right: 1px solid transparent;\n  padding: 0 0.5rem;\n}\n.sc-anj-pager-h .anj-pager-group.anj-page-buttons.sc-anj-pager {\n  -webkit-transform: scale(0.8335);\n  transform: scale(0.8335);\n  -webkit-transform-origin: 100% 0;\n  transform-origin: 100% 0;\n}\n.sc-anj-pager-h .anj-page-text.sc-anj-pager {\n  color: var(--anj-neutral);\n  font-size: 0.75rem;\n}\n.sc-anj-pager-h anj-select.sc-anj-pager {\n  margin-right: 0.25rem;\n  width: 2.75rem;\n}\n.sc-anj-pager-h anj-button.sc-anj-pager {\n  margin: 0;\n}"; }
};
Tunnel.injectProps(Pager, ['numberFormatter']);

export { Pager as anj_pager };
