import { Host, h } from "@stencil/core";
export class CpslPagination {
    constructor() {
        this.handlePrevClick = () => {
            if (this.currentPage > 0) {
                this.currentPage--;
            }
        };
        this.handleNextClick = () => {
            if (this.currentPage < this.totalPages - 1) {
                this.currentPage++;
            }
        };
        this.handlePageClick = (value) => () => {
            if (value >= 0 && value <= this.totalPages - 1) {
                this.currentPage = value;
            }
        };
        this.currentPage = 0;
        this.initialPage = undefined;
        this.totalPages = undefined;
        this.visiblePages = 5;
    }
    watchChange() {
        this.cpslPaginationChanged.emit(this.currentPage);
    }
    componentWillLoad() {
        var _a;
        this.currentPage = (_a = this.initialPage) !== null && _a !== void 0 ? _a : 0;
        if (this.visiblePages < 5) {
            this.visiblePages = 5;
        }
    }
    render() {
        const filteredPages = this.totalPages <= this.visiblePages ? [...Array(this.totalPages).keys()] : [];
        if (this.totalPages > this.visiblePages) {
            filteredPages.push(0);
            const isFirstSelected = this.currentPage === 0;
            const isLastSelected = this.currentPage === this.totalPages - 1;
            const isFirstOrLastSelected = isFirstSelected || isLastSelected;
            let remainingVisible = this.visiblePages - (isFirstOrLastSelected ? 2 : 3);
            const halfRemaining = Math.round(remainingVisible / 2);
            const numberBefore = Math.max(this.currentPage - 1, 0);
            const numberAfter = Math.max(this.totalPages - 2 - this.currentPage, 0);
            let beforeHalf = halfRemaining;
            let afterHalf = remainingVisible - halfRemaining;
            if (numberBefore >= beforeHalf) {
                if (numberAfter < afterHalf) {
                    beforeHalf += afterHalf - numberAfter;
                    afterHalf = numberAfter;
                }
            }
            else {
                afterHalf += beforeHalf - numberBefore;
                beforeHalf = numberBefore;
            }
            while (beforeHalf > 0) {
                filteredPages.push(this.currentPage - beforeHalf);
                beforeHalf--;
            }
            if (!isFirstSelected) {
                filteredPages.push(this.currentPage);
            }
            const pagesAfter = [];
            while (afterHalf > 0) {
                pagesAfter.push(this.currentPage + afterHalf);
                afterHalf--;
            }
            filteredPages.push(...pagesAfter.reverse());
            if (!isLastSelected) {
                filteredPages.push(this.totalPages - 1);
            }
        }
        return (h(Host, { key: '08ba1aa206baa9e7c8cb4c5622e87279b6e8f498' }, h("cpsl-button-group", { key: 'f0103c126de971b5571b25e587701976caffd2e1', selectedId: `${this.currentPage}` }, h("cpsl-button", { key: 'e3fc3c25e28e72169c669746b211befe19be5879', class: "arrow-button", onClick: this.handlePrevClick }, h("cpsl-icon", { key: '27160d1fb321b8f2657c4bc521b2f3bf3f8aae8b', class: { 'icon': true, 'start-icon': true }, icon: "arrowNarrow" })), filteredPages.map(page => (h("cpsl-button", { key: page, variant: "secondary", fullWidth: true, id: `${page}`, onClick: this.handlePageClick(page) }, h("cpsl-text", { variant: "bodyS" }, page + 1)))), h("cpsl-button", { key: '3211a3bb0db95e7f455490b939c7647e8c3ea79e', class: "arrow-button", onClick: this.handleNextClick }, h("cpsl-icon", { key: 'e321dd46868eab8d416507685e7415daa41c676e', class: "icon", icon: "arrowNarrow" })))));
    }
    static get is() { return "cpsl-pagination"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() {
        return {
            "$": ["cpsl-pagination.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["cpsl-pagination.css"]
        };
    }
    static get properties() {
        return {
            "initialPage": {
                "type": "number",
                "mutable": false,
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "The initial page to select.\nDefault is 0."
                },
                "attribute": "initial-page",
                "reflect": false
            },
            "totalPages": {
                "type": "number",
                "mutable": false,
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "The total number of pages."
                },
                "attribute": "total-pages",
                "reflect": false
            },
            "visiblePages": {
                "type": "number",
                "mutable": true,
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "The number of pages visible to select.\nDefault is 5.\nMin is 5."
                },
                "attribute": "visible-pages",
                "reflect": false,
                "defaultValue": "5"
            }
        };
    }
    static get states() {
        return {
            "currentPage": {}
        };
    }
    static get events() {
        return [{
                "method": "cpslPaginationChanged",
                "name": "cpslPaginationChanged",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "Emitted when exit animation finishes."
                },
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                }
            }];
    }
    static get watchers() {
        return [{
                "propName": "currentPage",
                "methodName": "watchChange"
            }];
    }
}
//# sourceMappingURL=cpsl-pagination.js.map
