import { integerSequence } from "@verdocs/js-sdk";
import { Host } from "@stencil/core";
import { h } from "@stencil/core";
const ChevronDoubleLeft = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M18.75 19.5l-7.5-7.5 7.5-7.5m-6 15L5.25 12l7.5-7.5" /></svg>`;
const ChevronDoubleRight = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M11.25 4.5l7.5 7.5-7.5 7.5m-6-15l7.5 7.5-7.5 7.5" /></svg>`;
const VISIBLE_PAGES = 5;
const PageButton = ({ page, selected, onClick }) => {
    let label;
    if (page === 'first') {
        label = ChevronDoubleLeft;
    }
    else if (page === 'last') {
        label = ChevronDoubleRight;
    }
    else {
        label = String(page + 1);
    }
    return h("div", { class: `page-button ${page === selected ? 'selected' : ''}`, onClick: () => onClick(page), innerHTML: label });
};
/**
 * Display a simple pagination control with individual buttons to move through the data set.
 *
 * ```ts
 * <verdocs-pagination
 *   selectedPage={1}
 *   itemCount={50}
 *   perPage={10}
 *   onSelectPage={(e) => {setSelectedpage(e.detail.selectedPage)}}
 * />
 * ```
 */
export class VerdocsQuickFilter {
    constructor() {
        /**
         * The currently selected page.
         */
        this.selectedPage = 0;
        /**
         * The total number of items.
         */
        this.itemCount = 1;
        /**
         * The number of displayed per page.
         */
        this.perPage = 10;
    }
    handleSelectPage(page) {
        var _a;
        this.selectedPage = page;
        (_a = this.selectPage) === null || _a === void 0 ? void 0 : _a.emit({ selectedPage: page });
    }
    render() {
        const firstPage = Math.max(0, this.selectedPage - 2);
        const numPages = this.itemCount > 0 ? Math.ceil(this.itemCount / this.perPage) : 0;
        const pagesToDisplay = integerSequence(0, Math.ceil(this.itemCount / this.perPage)).slice(firstPage, firstPage + VISIBLE_PAGES);
        return (h(Host, { key: 'b914afe290065b1f65b3632a1e205a0138d4ca96' }, this.selectedPage > 0 && h(PageButton, { key: '06d4c575361cffc6299409c66557208fef8180e9', page: 'first', selected: this.selectedPage, onClick: () => this.handleSelectPage(0) }), firstPage > 0 && h("div", { key: '14afa9724ff8159c20c372821fff58a98b721bc7', class: "ellipsis" }, "..."), pagesToDisplay.map(pageNumber => (h(PageButton, { page: pageNumber, selected: this.selectedPage, onClick: page => this.handleSelectPage(+page) }))), this.selectedPage < numPages - 1 && h("div", { key: '0b22a68cafaf3beda898442422a584cc9da811d9', class: "ellipsis" }, "..."), this.selectedPage < numPages - 1 && h(PageButton, { key: '56bfdb75c0a6bb0aab32aa61860051517fcf360b', page: 'last', selected: this.selectedPage, onClick: () => this.handleSelectPage(numPages - 1) })));
    }
    static get is() { return "verdocs-pagination"; }
    static get originalStyleUrls() {
        return {
            "$": ["verdocs-pagination.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["verdocs-pagination.css"]
        };
    }
    static get properties() {
        return {
            "selectedPage": {
                "type": "number",
                "attribute": "selected-page",
                "mutable": true,
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "The currently selected page."
                },
                "getter": false,
                "setter": false,
                "reflect": true,
                "defaultValue": "0"
            },
            "itemCount": {
                "type": "number",
                "attribute": "item-count",
                "mutable": false,
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "The total number of items."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "defaultValue": "1"
            },
            "perPage": {
                "type": "number",
                "attribute": "per-page",
                "mutable": false,
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "The number of displayed per page."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "defaultValue": "10"
            }
        };
    }
    static get events() {
        return [{
                "method": "selectPage",
                "name": "selectPage",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "Event fired when the selected page changes. The new page number is included in the event."
                },
                "complexType": {
                    "original": "{selectedPage: number}",
                    "resolved": "{ selectedPage: number; }",
                    "references": {}
                }
            }];
    }
    static get elementRef() { return "el"; }
}
//# sourceMappingURL=verdocs-pagination.js.map
