import { h } from "@stencil/core";
import { BigNumber } from "bignumber.js";
import { getPagination } from "./helpers";
export class Pagination {
    constructor() {
        this.currentPage = 1;
        this.isDisabled = false;
        this.isTooltipOpen = false;
    }
    watchCurrentPage(newValue) {
        if (newValue !== this.currentPageIndex) {
            this.currentPageIndex = newValue;
        }
    }
    handleTooltipStatus(isOpen) {
        this.isTooltipOpen = isOpen;
    }
    handlePageClick(newPageIndex) {
        if (newPageIndex === this.currentPageIndex) {
            return;
        }
        this.currentPageIndex = newPageIndex;
        this.pageChange.emit(newPageIndex);
    }
    handleEdgePageClick(pageToNavigateTo) {
        return (event) => {
            event.preventDefault();
            this.handlePageClick(pageToNavigateTo);
        };
    }
    isCurrentPageActive(paginationItem) {
        return new BigNumber(paginationItem).isEqualTo(this.currentPageIndex);
    }
    isInTheHundreds(paginationItem) {
        return parseFloat(paginationItem) && new BigNumber(paginationItem).isGreaterThanOrEqualTo(100);
    }
    componentWillLoad() {
        this.currentPageIndex = this.currentPage;
    }
    render() {
        const isLeftToggleDisabled = this.currentPageIndex === 1;
        const isRightToggleDisabled = this.currentPageIndex === this.totalPages;
        const paginationItems = getPagination({ currentPage: this.currentPageIndex, totalPages: this.totalPages });
        return (h("div", { key: '605609fe4dd0a47e68325ed22308341edde6bee1', class: { pagination: true, [this.class]: Boolean(this.class) } }, h("span", { key: '2d254a7fa7ae7c4187dc66da4dbf0baf1c882854', onClick: this.handleEdgePageClick(1), class: { 'pagination-angle': true, 'disabled': isLeftToggleDisabled } }, h("mvx-angles-left-icon", { key: 'faec3cacefc281b3b5ba2867635a80993ef0d6ac', class: "pagination-angle-icon" })), h("div", { key: '352df696b76b9cd66a1a6ee06e39fce41a95b554', onClick: this.handleEdgePageClick(this.currentPageIndex - 1), class: { 'pagination-edge-button': true, 'disabled': this.isDisabled, 'inactive': isLeftToggleDisabled } }, h("mvx-angle-left-icon", { key: 'e58d208d575fe998721ded7fe5b4740033ea9f58', class: "pagination-edge-button-icon" })), h("div", { key: '9082bc0b092dbdab4db048d8789e1c9f6a1f0515', class: "pagination-items" }, paginationItems.map(paginationItem => (h("div", { class: "pagination-item-wrapper" }, parseFloat(paginationItem) ? (h("div", { onClick: () => this.handlePageClick(Number(paginationItem)), class: {
                'pagination-item': true,
                'disabled': this.isDisabled,
                'active': this.isCurrentPageActive(paginationItem),
                'hundreds': this.isInTheHundreds(paginationItem),
            } }, h("span", { class: "pagination-item-text" }, paginationItem))) : (h("mvx-tooltip", { triggerOnClick: true, onTriggerRender: (event) => this.handleTooltipStatus(event.detail), trigger: h("mvx-pagination-ellipsis", { isActive: this.isTooltipOpen }) }, h("mvx-pagination-ellipsis-form", { isVisible: this.isTooltipOpen, maxPageToSearchFor: this.totalPages, onSearch: (event) => this.handlePageClick(event.detail) }))))))), h("div", { key: '778e18739f82d98ac0314027457e85738f0df289', onClick: this.handleEdgePageClick(this.currentPageIndex + 1), class: { 'pagination-edge-button': true, 'disabled': this.isDisabled, 'inactive': isRightToggleDisabled } }, h("mvx-angle-right-icon", { key: '943a88b3a391a925321c69bb51620e2039b6f953', class: "pagination-edge-button-icon" })), h("span", { key: '814463ff9451bc82801291b672efac9fd6e6e481', onClick: this.handleEdgePageClick(this.totalPages), class: { 'pagination-angle': true, 'disabled': isRightToggleDisabled } }, h("mvx-angles-right-icon", { key: '4de0b351beff8b36327b5b2dba3d8997a05e50d8', class: "pagination-angle-icon" }))));
    }
    static get is() { return "mvx-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"
            },
            "totalPages": {
                "type": "number",
                "attribute": "total-pages",
                "mutable": false,
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false
            },
            "isDisabled": {
                "type": "boolean",
                "attribute": "is-disabled",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "defaultValue": "false"
            },
            "class": {
                "type": "string",
                "attribute": "class",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false
            }
        };
    }
    static get states() {
        return {
            "currentPageIndex": {},
            "isTooltipOpen": {}
        };
    }
    static get events() {
        return [{
                "method": "pageChange",
                "name": "pageChange",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                }
            }];
    }
    static get watchers() {
        return [{
                "propName": "currentPage",
                "methodName": "watchCurrentPage"
            }];
    }
}
//# sourceMappingURL=pagination.js.map
