/*!
 * Custom elements for Nanopore-Digital Web applications
 */
import { h, Host, } from "@stencil/core";
import { Wormhole } from "./algolia-data";
/**
 * Displays results from Algolia searches.
 * TODO / WIP */
export class AlgoliaPagination {
    el;
    outputEle;
    outputSlot;
    outputTo;
    templateStr;
    templateSlot;
    currentPage = null;
    canGoPrev = false;
    canGoNext = false;
    show = true;
    tplRenderFn;
    indexResults = null;
    infiniteScroll = false;
    /** Max number of page numbers to show */
    maxToShow = null;
    /**
     * Emitted when the page number changes
     */
    nanoPageChanged;
    currentPageChange() { }
    infiniteScrollChange() {
        this.show = !this.infiniteScroll;
    }
    /** Go to next page from current */
    async nextPage() { }
    /** Go to previous page from current */
    async prevPage() { }
    /** Go to a particular page */
    async goToPage(page) {
        console.info(page);
    }
    updateContent() {
        this.outputTo = this.outputSlot || this.outputEle;
        if (!this.templateStr || !this.outputTo || !this.indexResults) {
            this.show = false;
            return;
        }
    }
    componentWillLoad() {
        this.templateSlot = this.el.querySelector('[slot="filter-template"]');
        this.outputSlot = this.el.querySelector('[slot="output"]');
        if (this.templateSlot)
            this.templateStr = this.templateSlot.innerHTML;
    }
    componentDidLoad() {
        this.updateContent();
    }
    render() {
        return (h(Host, { key: '488332e371953208f90e754ebdceff321795177c', class: {
                'show-pagination': this.show,
            } }, h("div", { key: '9f24519df07b4f022297a5e6f1ace601efc71e2b', ref: (div) => (this.outputEle = div) }, h("slot", { key: '363d87eb251ba2db6e6c3346e32f5dcb8b8d3a0c', name: "output" }))));
    }
    static get is() { return "nano-algolia-pagination"; }
    static get encapsulation() { return "shadow"; }
    static get properties() {
        return {
            "maxToShow": {
                "type": "number",
                "attribute": "max-to-show",
                "mutable": false,
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Max number of page numbers to show"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "defaultValue": "null"
            }
        };
    }
    static get states() {
        return {
            "currentPage": {},
            "canGoPrev": {},
            "canGoNext": {},
            "show": {},
            "tplRenderFn": {},
            "indexResults": {},
            "infiniteScroll": {}
        };
    }
    static get events() {
        return [{
                "method": "nanoPageChanged",
                "name": "nanoPageChanged",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "Emitted when the page number changes"
                },
                "complexType": {
                    "original": "{ page: number }",
                    "resolved": "{ page: number; }",
                    "references": {}
                }
            }];
    }
    static get methods() {
        return {
            "nextPage": {
                "complexType": {
                    "signature": "() => Promise<void>",
                    "parameters": [],
                    "references": {
                        "Promise": {
                            "location": "global",
                            "id": "global::Promise"
                        }
                    },
                    "return": "Promise<void>"
                },
                "docs": {
                    "text": "Go to next page from current",
                    "tags": []
                }
            },
            "prevPage": {
                "complexType": {
                    "signature": "() => Promise<void>",
                    "parameters": [],
                    "references": {
                        "Promise": {
                            "location": "global",
                            "id": "global::Promise"
                        }
                    },
                    "return": "Promise<void>"
                },
                "docs": {
                    "text": "Go to previous page from current",
                    "tags": []
                }
            },
            "goToPage": {
                "complexType": {
                    "signature": "(page: number) => Promise<void>",
                    "parameters": [{
                            "name": "page",
                            "type": "number",
                            "docs": ""
                        }],
                    "references": {
                        "Promise": {
                            "location": "global",
                            "id": "global::Promise"
                        }
                    },
                    "return": "Promise<void>"
                },
                "docs": {
                    "text": "Go to a particular page",
                    "tags": []
                }
            }
        };
    }
    static get elementRef() { return "el"; }
    static get watchers() {
        return [{
                "propName": "currentPage",
                "methodName": "currentPageChange"
            }, {
                "propName": "infiniteScroll",
                "methodName": "infiniteScrollChange"
            }];
    }
}
// Use the injectProps method to pass from the tunnel as props to the component
Wormhole(AlgoliaPagination, [
    'indexResults',
    'filterChanged',
    'tplRenderFn',
]);
