import { h } from "@stencil/core";
import { debounce } from '../../utils/utils';
export class Popover {
    constructor() {
        this.scrollListener = () => this.onScroll(window);
        /**
         * Render the arrow
         */
        this.arrow = true;
        /**
         * The strategy for dismissing the popover
         * Options are: `"explicit"`and `"auto"`. Defaults to "explicit".
         */
        this.dismiss = 'explicit';
        /**
         * The preferred placement
         * Options are: `"botton"`, `"left"`, `"right"`, and "top" which is the default
         */
        this.placement = 'top';
    }
    componentWillLoad() {
        this.onScroll = debounce(this.onScroll.bind(this), 50);
    }
    async disconnectedCallback() {
        if (this.dismiss === 'auto') {
            this.target = undefined;
            window.removeEventListener('scroll', this.scrollListener);
        }
        if (this.overlay) {
            const popper = await this.overlay.popper();
            if (popper) {
                this.overlay.remove();
            }
        }
    }
    /**
     * Display the popover
     */
    async display(target) {
        const popper = await this.overlay.popper();
        if (popper) {
            popper.reference = target;
            popper.scheduleUpdate();
        }
        else {
            if (this.dismiss === 'auto') {
                this.target = target;
                window.addEventListener('scroll', this.scrollListener);
            }
            return this.overlay.open(target);
        }
    }
    /**
     * Hide the popover
     */
    async hide() {
        this.disconnectedCallback();
        await this.overlay.close();
    }
    /**
     * Alternate hiding and showing
     */
    async toggle(target) {
        const popper = await this.overlay.popper();
        if (popper) {
            return this.hide();
        }
        else {
            return this.display(target);
        }
    }
    async showing() {
        const popper = await this.overlay.popper();
        return !!popper;
    }
    async onScroll(win) {
        if (win.scrollY > (this.target.offsetTop + this.target.offsetHeight) || win.scrollY < (this.target.offsetTop - this.target.offsetHeight)) {
            return this.hide();
        }
    }
    render() {
        return (h("anj-overlay", { class: "anj-popover", dismiss: this.dismiss, scrollable: true, placement: this.placement, offset: this.arrow ? '0, 15' : '0, 5', ref: (ref) => this.overlay = ref },
            this.arrow ? h("anj-arrow", null) : '',
            h("div", { class: "anj-popover-content" },
                h("slot", null))));
    }
    static get is() { return "anj-popover"; }
    static get encapsulation() { return "scoped"; }
    static get originalStyleUrls() { return {
        "$": ["popover.scss"]
    }; }
    static get styleUrls() { return {
        "$": ["popover.css"]
    }; }
    static get properties() { return {
        "arrow": {
            "type": "boolean",
            "mutable": false,
            "complexType": {
                "original": "boolean",
                "resolved": "boolean",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": "Render the arrow"
            },
            "attribute": "arrow",
            "reflect": false,
            "defaultValue": "true"
        },
        "dismiss": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "'auto' | 'explicit'",
                "resolved": "\"auto\" | \"explicit\"",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": "The strategy for dismissing the popover\nOptions are: `\"explicit\"`and `\"auto\"`. Defaults to \"explicit\"."
            },
            "attribute": "dismiss",
            "reflect": false,
            "defaultValue": "'explicit'"
        },
        "placement": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "OverlayPlacement",
                "resolved": "\"auto\" | \"auto-end\" | \"auto-start\" | \"bottom\" | \"bottom-end\" | \"bottom-start\" | \"left\" | \"left-end\" | \"left-start\" | \"right\" | \"right-end\" | \"right-start\" | \"top\" | \"top-end\" | \"top-start\"",
                "references": {
                    "OverlayPlacement": {
                        "location": "import",
                        "path": "../../types/types"
                    }
                }
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": "The preferred placement\nOptions are: `\"botton\"`, `\"left\"`, `\"right\"`, and \"top\" which is the default"
            },
            "attribute": "placement",
            "reflect": false,
            "defaultValue": "'top'"
        }
    }; }
    static get methods() { return {
        "display": {
            "complexType": {
                "signature": "(target: HTMLElement) => Promise<void>",
                "parameters": [{
                        "tags": [],
                        "text": ""
                    }],
                "references": {
                    "Promise": {
                        "location": "global"
                    },
                    "HTMLElement": {
                        "location": "global"
                    }
                },
                "return": "Promise<void>"
            },
            "docs": {
                "text": "Display the popover",
                "tags": []
            }
        },
        "hide": {
            "complexType": {
                "signature": "() => Promise<void>",
                "parameters": [],
                "references": {
                    "Promise": {
                        "location": "global"
                    }
                },
                "return": "Promise<void>"
            },
            "docs": {
                "text": "Hide the popover",
                "tags": []
            }
        },
        "toggle": {
            "complexType": {
                "signature": "(target?: HTMLElement) => Promise<void>",
                "parameters": [{
                        "tags": [],
                        "text": ""
                    }],
                "references": {
                    "Promise": {
                        "location": "global"
                    },
                    "HTMLElement": {
                        "location": "global"
                    }
                },
                "return": "Promise<void>"
            },
            "docs": {
                "text": "Alternate hiding and showing",
                "tags": []
            }
        },
        "showing": {
            "complexType": {
                "signature": "() => Promise<boolean>",
                "parameters": [],
                "references": {
                    "Promise": {
                        "location": "global"
                    }
                },
                "return": "Promise<boolean>"
            },
            "docs": {
                "text": "",
                "tags": []
            }
        }
    }; }
    static get elementRef() { return "element"; }
}
