import { h, } from "@stencil/core";
import { isNestedInIfxComponent } from "../..//shared/utils/dom-utils";
import { detectFramework } from "../..//shared/utils/framework-detection";
import { trackComponent } from "../../shared/utils/tracking";
export class Pagination {
    el;
    ifxPageChange;
    ifxItemsPerPageChange;
    currentPage = 1;
    showItemsPerPage = true;
    internalPage = 1;
    internalItemsPerPage = 10;
    numberOfPages = [];
    total = 1;
    itemsPerPage;
    filteredItemsPerPage = [];
    visiblePages = [];
    CLASS_DISABLED = "disabled";
    CLASS_ACTIVE = "active";
    prevInternalPage;
    watchTotalHandler() {
        this.calculateNumberOfPages();
        this.updateVisiblePages();
    }
    currentPageWatcher(newVal) {
        this.internalPage = Math.max(1, Math.min(newVal, this.numberOfPages.length));
        this.calculateNumberOfPages();
        this.updateVisiblePages();
    }
    setItemsPerPage(e) {
        const selectedValue = e.detail?.value || e.detail?.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) => ({
            ...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();
    }
    handlePageClick = (e) => {
        const li = e.currentTarget;
        const page = parseInt(li.dataset.page);
        if (!isNaN(page))
            this.changePage(page);
    };
    handleResize = () => {
        // Debounce resize events to prevent excessive calls
        clearTimeout(this.resizeTimeout);
        this.resizeTimeout = setTimeout(() => {
            this.updateVisiblePages();
        }, 100);
    };
    resizeTimeout;
    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: 'c6c109c72c0285da088db7222a063d6c4a481163', class: "container" }, this.showItemsPerPage && (h("div", { key: '23517200a4820e507140c69b3db28917a5753cad', class: "items__per-page-wrapper" }, h("div", { key: 'f7215ab1cbf3cd6d3cbf2394b808ef766dd69eae', class: "items__per-page-label" }, "Results per Page"), h("div", { key: 'ae1e60905adf481752e1560c549ae139af96f486', class: "items__per-page-field" }, h("ifx-select", { key: '2011246dba861ad1154f6af88ae03a0c24e94a54', id: "itemsPerPageSelect", placeholder: "false", "show-search": "false", value: undefined, disabled: false, error: false, size: "s", options: this.filteredItemsPerPage, "placeholder-value": "Select" })))), h("div", { key: '4831938ec8ec05e3fb0ab31ac7701ef65995f5f1', class: "items__total-wrapper" }, h("div", { key: 'bea6adf3cf6a5a10d41ada4697dfffcde591ecef', class: "pagination" }, h("ifx-icon-button", { key: 'ee0726915e5953dca33c8dc15b3920199c2dfff1', class: "prev", icon: "arrow-left-16", "aria-label": "Previous Page", onClick: () => this.changePage(this.internalPage - 1), variant: "secondary" }), h("ol", { key: '07043c739719085dfd53ff7793c3c59917d0a554' }, this.visiblePages.map((page, i) => typeof page === "number" ? (h("li", { key: `page-${page}`, class: { [this.CLASS_ACTIVE]: page === this.internalPage }, "data-page": page }, h("span", { class: "page__button", role: "button", tabindex: "0", "aria-current": page === this.internalPage ? "page" : undefined, "aria-label": `Page ${page}`, onClick: () => this.changePage(page), onKeyDown: (e) => (e.key === "Enter" || e.key === " ") &&
                this.changePage(page) }, page))) : (h("li", { class: "ellipsis", key: `ellipsis-${i}` }, h("span", { "aria-hidden": "true" }, "..."))))), h("ifx-icon-button", { key: '1951d5e1092242761b8a2860b6fc7c6d85d34408', class: "next", icon: "arrow-right-16", "aria-label": "Next Page", 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",
                "mutable": false,
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "current-page",
                "defaultValue": "1"
            },
            "showItemsPerPage": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "show-items-per-page",
                "defaultValue": "true"
            },
            "total": {
                "type": "number",
                "mutable": false,
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "total",
                "defaultValue": "1"
            },
            "itemsPerPage": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "any[] | string",
                    "resolved": "any[] | string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "items-per-page"
            }
        };
    }
    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
