import { h } from "@stencil/core";
import { trackComponent } from "../../global/utils/tracking";
import { isNestedInIfxComponent } from "../../global/utils/dom-utils";
import { detectFramework } from "../../global/utils/framework-detection";
export class Pagination {
    constructor() {
        this.currentPage = 1;
        this.showItemsPerPage = true;
        this.internalPage = 1;
        this.internalItemsPerPage = 10;
        this.numberOfPages = [];
        this.total = 1;
        this.filteredItemsPerPage = [];
        this.visiblePages = [];
        this.CLASS_DISABLED = "disabled";
        this.CLASS_ACTIVE = "active";
        this.handlePageClick = (e) => {
            const li = e.currentTarget;
            const page = parseInt(li.dataset.page);
            if (!isNaN(page))
                this.changePage(page);
        };
        this.handleResize = () => {
            // Debounce resize events to prevent excessive calls
            clearTimeout(this.resizeTimeout);
            this.resizeTimeout = setTimeout(() => {
                this.updateVisiblePages();
            }, 100);
        };
    }
    watchTotalHandler() {
        this.calculateNumberOfPages();
        this.updateVisiblePages();
    }
    currentPageWatcher(newVal) {
        this.internalPage = Math.max(1, Math.min(newVal, this.numberOfPages.length));
        this.calculateNumberOfPages();
        this.updateVisiblePages();
    }
    setItemsPerPage(e) {
        var _a, _b;
        const selectedValue = ((_a = e.detail) === null || _a === void 0 ? void 0 : _a.value) || ((_b = e.detail) === null || _b === void 0 ? void 0 : _b.label);
        const newItemsPerPage = parseInt(selectedValue) || 10;
        if (newItemsPerPage === this.internalItemsPerPage) {
            return;
        }
        this.internalItemsPerPage = newItemsPerPage;
        this.internalPage = 1;
        this.calculateNumberOfPages();
        this.updateVisiblePages();
        this.handleEventEmission();
    }
    emitItemsPerPage(e) {
        this.ifxItemsPerPageChange.emit(e.detail.label);
    }
    async componentDidLoad() {
        if (this.showItemsPerPage) {
            const select = this.el.shadowRoot.querySelector('#itemsPerPageSelect');
            if (select) {
                select.addEventListener('ifxSelect', (e) => this.emitItemsPerPage(e));
            }
        }
        // Add resize listener to update pagination on screen size changes
        window.addEventListener('resize', this.handleResize);
        if (!isNestedInIfxComponent(this.el)) {
            const framework = detectFramework();
            trackComponent('ifx-pagination', await framework);
        }
        this.initPagination();
    }
    disconnectedCallback() {
        if (this.showItemsPerPage) {
            const select = this.el.shadowRoot.querySelector('#itemsPerPageSelect');
            if (select) {
                select.removeEventListener('ifxSelect', (e) => this.emitItemsPerPage(e));
            }
        }
        // Remove resize listener
        window.removeEventListener('resize', this.handleResize);
        // Clear any pending resize timeout
        if (this.resizeTimeout) {
            clearTimeout(this.resizeTimeout);
        }
    }
    updateVisiblePages() {
        // Check if screen is mobile (< 375px)
        const isMobile = window.innerWidth < 375;
        const totalPages = this.numberOfPages.length;
        const current = this.internalPage;
        let pages = [];
        if (isMobile) {
            // Mobile logic: maximum 5 elements
            if (totalPages <= 5) {
                pages = [...this.numberOfPages];
            }
            else {
                // Always show first page
                pages.push(1);
                if (current <= 2) {
                    // Show: 1 2 3 … 10 (for pages 1 and 2)
                    pages.push(2, 3, '...', totalPages);
                }
                else if (current >= totalPages - 1) {
                    // Show: 1 … 23 24 25 (for last 2 pages only)
                    pages.push('...', totalPages - 2, totalPages - 1, totalPages);
                }
                else {
                    // Show: 1 … 5 … 10 (for middle pages, including page 3 and third-to-last page)
                    pages.push('...', current, '...', totalPages);
                }
            }
        }
        else {
            // Desktop logic: maximum 7 elements
            const buffer = 2;
            if (totalPages <= 7) {
                pages = [...this.numberOfPages];
            }
            else {
                // Always show first page
                pages.push(1);
                // Determine the range around current page
                let start = Math.max(2, current - buffer);
                let end = Math.min(totalPages - 1, current + buffer);
                // Adjust range to ensure we show enough pages
                // If we're close to the beginning, extend the end
                if (current <= 4) {
                    start = 2;
                    end = Math.min(totalPages - 1, 5);
                }
                // If we're close to the end, extend the start
                else if (current >= totalPages - 3) {
                    start = Math.max(2, totalPages - 4);
                    end = totalPages - 1;
                }
                // For middle pages, show current +/- 1
                else {
                    start = current - 1;
                    end = current + 1;
                }
                // Add ellipsis before the range if there's a gap
                if (start > 2) {
                    pages.push('...');
                }
                // Add the range of pages
                for (let i = start; i <= end; i++) {
                    pages.push(i);
                }
                // Add ellipsis after the range if there's a gap
                if (end < totalPages - 1) {
                    pages.push('...');
                }
                // Always show last page
                pages.push(totalPages);
            }
        }
        this.visiblePages = pages;
    }
    calculateNumberOfPages() {
        const totalPages = Math.ceil(this.total / this.internalItemsPerPage);
        this.numberOfPages = Array.from({ length: totalPages }, (_, i) => i + 1);
        this.internalPage = Math.max(1, Math.min(this.currentPage, totalPages));
    }
    filterOptionsArray() {
        const items = typeof this.itemsPerPage === 'string' ?
            JSON.parse(this.itemsPerPage) : this.itemsPerPage;
        this.filteredItemsPerPage = items.map(item => (Object.assign(Object.assign({}, item), { label: item.label || item.value })));
    }
    componentWillLoad() {
        this.filterOptionsArray();
        const selectedOption = this.filteredItemsPerPage.find(option => option.selected);
        if (selectedOption) {
            this.internalItemsPerPage = Number(selectedOption.value);
        }
        else if (this.filteredItemsPerPage.length > 0) {
            this.internalItemsPerPage = Number(this.filteredItemsPerPage[0].value);
        }
        this.calculateNumberOfPages();
        this.internalPage = Math.max(1, Math.min(this.currentPage, this.numberOfPages.length));
        this.updateVisiblePages();
    }
    componentWillUpdate() {
        if (this.prevInternalPage !== this.internalPage) {
            this.updateVisiblePages();
            this.prevInternalPage = this.internalPage;
        }
    }
    componentDidUpdate() {
        this.initPagination();
    }
    handleEventEmission() {
        this.ifxPageChange.emit({
            currentPage: this.internalPage,
            totalPages: this.numberOfPages.length,
            itemsPerPage: this.internalItemsPerPage
        });
    }
    initPagination() {
        const pagination = this.el.shadowRoot.querySelector('.pagination');
        if (!pagination)
            return;
        const updateButtons = () => {
            const prev = pagination.querySelector('.prev');
            const next = pagination.querySelector('.next');
            if (prev) {
                prev.disabled = this.internalPage === 1;
                prev.classList.toggle(this.CLASS_DISABLED, this.internalPage === 1);
            }
            if (next) {
                next.disabled = this.internalPage === this.numberOfPages.length;
                next.classList.toggle(this.CLASS_DISABLED, this.internalPage === this.numberOfPages.length);
            }
        };
        pagination.querySelectorAll('li').forEach(li => {
            li.removeEventListener('click', this.handlePageClick);
            li.addEventListener('click', this.handlePageClick);
        });
        updateButtons();
    }
    changePage(newPage) {
        newPage = Math.max(1, Math.min(newPage, this.numberOfPages.length));
        if (newPage === this.internalPage)
            return;
        this.internalPage = newPage;
        this.handleEventEmission();
        this.initPagination();
    }
    render() {
        return (h("div", { key: '9a4b41bb714202dcc144f626b9a2096480852ad6', class: "container" }, this.showItemsPerPage && (h("div", { key: '9e829381e98967180e89bf8f8988c67bbb998814', class: "items__per-page-wrapper" }, h("div", { key: 'be5d328337c18096cd1363f3c7c0c060693fe525', class: "items__per-page-label" }, "Results per Page"), h("div", { key: '37f663194a695059779305e0723321c26f55d191', class: "items__per-page-field" }, h("ifx-select", { key: '916cc188fd2f7d86243db5955f091e188defbacc', id: 'itemsPerPageSelect', placeholder: 'false', "show-search": 'false', value: undefined, disabled: false, error: false, size: "s", options: this.filteredItemsPerPage, "placeholder-value": "Select" })))), h("div", { key: 'f6531ac8c0710f53ff375e8ee4fa19bb47be5cef', class: "items__total-wrapper" }, h("div", { key: '4edaf3f1bc17c3423c2b39473a0f5ddc959278d6', class: "pagination" }, h("ifx-icon-button", { key: 'd30c1f86413921188e0591ce4c4ff1a3a9f27552', class: "prev", icon: "arrow-left-16", onClick: () => this.changePage(this.internalPage - 1), variant: "secondary" }), h("ol", { key: '1923906c1ebf95022db58530c0f7697f7aee60e3' }, this.visiblePages.map((page, i) => typeof page === 'number' ? (h("li", { key: `page-${page}`, class: { [this.CLASS_ACTIVE]: page === this.internalPage }, "data-page": page }, h("a", { href: "javascript:void(0)" }, page))) : (h("li", { class: "ellipsis", key: `ellipsis-${i}` }, h("span", null, "..."))))), h("ifx-icon-button", { key: '1d977b9636b485ebe750bf87f319c97598aa19a3', class: "next", icon: "arrow-right-16", onClick: () => this.changePage(this.internalPage + 1), variant: "secondary" })))));
    }
    static get is() { return "ifx-pagination"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() {
        return {
            "$": ["pagination.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["pagination.css"]
        };
    }
    static get properties() {
        return {
            "currentPage": {
                "type": "number",
                "attribute": "current-page",
                "mutable": false,
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "defaultValue": "1"
            },
            "showItemsPerPage": {
                "type": "boolean",
                "attribute": "show-items-per-page",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "defaultValue": "true"
            },
            "total": {
                "type": "number",
                "attribute": "total",
                "mutable": false,
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "defaultValue": "1"
            },
            "itemsPerPage": {
                "type": "string",
                "attribute": "items-per-page",
                "mutable": false,
                "complexType": {
                    "original": "any[] | string",
                    "resolved": "any[] | string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false
            }
        };
    }
    static get states() {
        return {
            "internalPage": {},
            "internalItemsPerPage": {},
            "numberOfPages": {},
            "filteredItemsPerPage": {},
            "visiblePages": {}
        };
    }
    static get events() {
        return [{
                "method": "ifxPageChange",
                "name": "ifxPageChange",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "complexType": {
                    "original": "any",
                    "resolved": "any",
                    "references": {}
                }
            }, {
                "method": "ifxItemsPerPageChange",
                "name": "ifxItemsPerPageChange",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "complexType": {
                    "original": "any",
                    "resolved": "any",
                    "references": {}
                }
            }];
    }
    static get elementRef() { return "el"; }
    static get watchers() {
        return [{
                "propName": "total",
                "methodName": "watchTotalHandler"
            }, {
                "propName": "currentPage",
                "methodName": "currentPageWatcher"
            }];
    }
    static get listeners() {
        return [{
                "name": "ifxSelect",
                "method": "setItemsPerPage",
                "target": undefined,
                "capture": false,
                "passive": false
            }];
    }
}
//# sourceMappingURL=pagination.js.map
