import { h, Host } from "@stencil/core";
import { Icon } from "../internal-component/icon";
export class ZPagination {
    currentPage = 1;
    totalPages = 1;
    pageChange;
    getPaginationButtons() {
        const pages = [];
        const delta = 1; // Show 1 page on each side of current
        if (this.totalPages <= 7) {
            // Show all pages if 7 or fewer
            for (let i = 1; i <= this.totalPages; i++) {
                pages.push(i);
            }
        }
        else {
            // Always show first page
            pages.push(1);
            // Calculate range around current page
            const rangeStart = Math.max(2, this.currentPage - delta);
            const rangeEnd = Math.min(this.totalPages - 1, this.currentPage + delta);
            // Add left ellipsis if needed
            if (rangeStart > 2) {
                pages.push('ellipsis');
            }
            // Add range around current page
            for (let i = rangeStart; i <= rangeEnd; i++) {
                pages.push(i);
            }
            // Add right ellipsis if needed
            if (rangeEnd < this.totalPages - 1) {
                pages.push('ellipsis');
            }
            // Always show last page
            pages.push(this.totalPages);
        }
        return {
            pages,
            hasPrevious: this.currentPage > 1,
            hasNext: this.currentPage < this.totalPages,
        };
    }
    handlePageClick = (page) => {
        if (page !== this.currentPage && page >= 1 && page <= this.totalPages) {
            this.pageChange.emit(page);
        }
    };
    handlePrevious = () => {
        if (this.currentPage > 1) {
            this.pageChange.emit(this.currentPage - 1);
        }
    };
    handleNext = () => {
        if (this.currentPage < this.totalPages) {
            this.pageChange.emit(this.currentPage + 1);
        }
    };
    render() {
        const { pages, hasPrevious, hasNext } = this.getPaginationButtons();
        const numberFormatter = Intl.NumberFormat();
        return (h(Host, { key: '27f477e8323ca680af5e76d52b5311cf6a8bc3a2' }, h("nav", { key: '851b4784b7c520866976cd9610c824071844f141', class: "pagination-container", role: "navigation", "aria-label": "Pagination" }, h("button", { key: 'e7c5b3a2dd2a655b9ca19ef1ca5bc29ae90bc0d6', class: "pagination-nav", onClick: this.handlePrevious, disabled: !hasPrevious, "aria-label": "Previous page", title: "Previous page" }, h(Icon, { key: '03fda9139c2978b0c132388c1ee4df5c294c71af', name: "ChevronLeft", addClass: "size-4" })), pages.map((page, index) => {
            if (page === 'ellipsis') {
                return (h("span", { key: `ellipsis-${index}`, class: "pagination-ellipsis", "aria-hidden": "true" }, "..."));
            }
            const isActive = page === this.currentPage;
            return (h("button", { key: `page-${page}`, class: `pagination-button ${isActive ? 'active' : ''}`, onClick: () => this.handlePageClick(page), "aria-label": `Page ${page}`, "aria-current": isActive ? 'page' : undefined, title: `Go to page ${page}` }, numberFormatter.format(page)));
        }), h("button", { key: 'f80d2e28defe030cf34d570b4ea85a8466f26455', class: "pagination-nav", onClick: this.handleNext, disabled: !hasNext, "aria-label": "Next page", title: "Next page" }, h(Icon, { key: '1aadde747635c468783ed4770ec663e9f1582340', name: "ChevronRight", addClass: "size-4" })))));
    }
    static get is() { return "z-pagination"; }
    static get originalStyleUrls() {
        return {
            "$": ["z-pagination.css"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["z-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"
            },
            "totalPages": {
                "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-pages",
                "defaultValue": "1"
            }
        };
    }
    static get events() {
        return [{
                "method": "pageChange",
                "name": "pageChange",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                }
            }];
    }
}
