import { h } from "@stencil/core";
import { guid } from "../../utils";
const DOTS = '...';
const range = (start, end) => {
    let length = end - start + 1;
    return Array.from({ length }, (_, idx) => idx + start);
};
export class DgaPagination {
    constructor() {
        this.size = 'large';
        this.totalPageCount = 10;
        // currentPage: number = 1;
        this.siblingCount = 1;
        this.onChange = () => { };
        this.currentPage = 1;
        this.onNext = () => {
            if (this.currentPage == this.totalPageCount)
                return;
            this.currentPage = this.currentPage + 1;
            this.onChange && this.onChange(this.currentPage);
        };
        this.onPrevious = () => {
            if (this.currentPage == 1)
                return;
            this.currentPage = this.currentPage - 1;
            this.onChange && this.onChange(this.currentPage);
        };
        this.handelPageChange = (activePage) => {
            if (activePage == this.currentPage)
                return;
            this.currentPage = activePage;
            this.onChange(this.currentPage);
        };
    }
    get paginationRange() {
        const { totalPageCount, siblingCount, currentPage } = this;
        const totalPageNumbers = siblingCount + 5;
        // If the number of pages is less than the page numbers we want to show in our pagination component, we return the range [1..totalPageCount]
        if (totalPageNumbers >= totalPageCount) {
            return range(1, totalPageCount);
        }
        const leftSiblingIndex = Math.max(currentPage - siblingCount, 1);
        const rightSiblingIndex = Math.min(currentPage + siblingCount, totalPageCount);
        const shouldShowLeftDots = leftSiblingIndex > 2;
        const shouldShowRightDots = rightSiblingIndex < totalPageCount - 2;
        const firstPageIndex = 1;
        const lastPageIndex = totalPageCount;
        if (!shouldShowLeftDots && shouldShowRightDots) {
            let leftItemCount = 3 + 2 * siblingCount;
            let leftRange = range(1, leftItemCount);
            return [...leftRange, DOTS, totalPageCount];
        }
        if (shouldShowLeftDots && !shouldShowRightDots) {
            let rightItemCount = 3 + 2 * siblingCount;
            let rightRange = range(totalPageCount - rightItemCount + 1, totalPageCount);
            return [firstPageIndex, DOTS, ...rightRange];
        }
        if (shouldShowLeftDots && shouldShowRightDots) {
            let middleRange = range(leftSiblingIndex, rightSiblingIndex);
            return [firstPageIndex, DOTS, ...middleRange, DOTS, lastPageIndex];
        }
        return [];
    }
    render() {
        return (h("ul", { key: 'f58f858920bc8baccc4718ed8ebeaa8e8673e4f4',
            // id={this.id}
            //   ref={ref}
            //   {...(customAttribute.key && {
            //     [customAttribute.key]: customAttribute.value
            //       ? customAttribute.value
            //       : "",
            //   })}
            class: `pagination pagination--${this.size}` }, h("li", { key: '199d99532a04ff6b34ed8a9188e8cc2364c9a039', class: "pagination__item pagination__arrow" }, h("button", { key: '15dfa67a361ef2d399d3933b4acfac434bbc72a4', onClick: this.onPrevious, disabled: this.currentPage === 1 }, h("svg", { key: '93b829a0b9b4fe83a3be65dd41d10e39e42842d5', width: "17", height: "16", viewBox: "0 0 17 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("g", { key: 'd66ce214d07faf11742f720dcd49ead707ade3b2', id: "Leading Icon" }, h("path", { key: '9abb1effaa8de56746d2a599d0a574ee42c91984', id: "Icon", d: "M10.5 12L6.5 8L10.5 4", stroke: "#161616", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }))))), this.paginationRange &&
            this.paginationRange.map(pageNumber => {
                if (pageNumber === DOTS) {
                    return (h("li", { key: guid(), class: "pagination__item" }, "\u2026"));
                }
                return (h("li", { key: guid(), class: `pagination__item ${this.currentPage === pageNumber ? 'pagination__item--active' : ''}` }, h("button", { onClick: () => {
                        this.handelPageChange(pageNumber);
                    } }, pageNumber)));
            }), h("li", { key: 'a7a269e65511949066a5c9506acdf6d3fc1d1012', class: "pagination__item pagination__arrow" }, h("button", { key: '1e049a53ad4a184ec43021f010e6d2dd6ef87fb9', onClick: this.onNext, disabled: this.currentPage === this.totalPageCount }, h("svg", { key: '0cd419828c1b5c9ccd8a601246e20f32a43e9203', width: "17", height: "16", viewBox: "0 0 17 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("g", { key: '00f9b99fe7e22c5cb0cfd05676e851336eaa02f4', id: "Leading Icon" }, h("path", { key: '0af56ded94b5859fb7d2ef36c061911fe1dae7be', id: "Icon", d: "M6.5 12L10.5 8L6.5 4", stroke: "#161616", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" })))))));
    }
    static get is() { return "dga-pagination"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() {
        return {
            "$": ["dga-pagination.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["dga-pagination.css"]
        };
    }
    static get properties() {
        return {
            "size": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "'small' | 'medium' | 'large'",
                    "resolved": "\"large\" | \"medium\" | \"small\"",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "attribute": "size",
                "reflect": false,
                "defaultValue": "'large'"
            },
            "totalPageCount": {
                "type": "number",
                "mutable": false,
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "attribute": "total-page-count",
                "reflect": false,
                "defaultValue": "10"
            },
            "siblingCount": {
                "type": "number",
                "mutable": false,
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "attribute": "sibling-count",
                "reflect": false,
                "defaultValue": "1"
            },
            "onChange": {
                "type": "unknown",
                "mutable": false,
                "complexType": {
                    "original": "(value: number) => void",
                    "resolved": "(value: number) => void",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "defaultValue": "() => {}"
            }
        };
    }
    static get states() {
        return {
            "currentPage": {}
        };
    }
}
//# sourceMappingURL=dga-pagination.js.map
