import { createPopper } from "@popperjs/core";
import { h, Host } from "@stencil/core";
/**
 * Display an icon button that triggers a drop-down panel that can display
 * arbitrary child content, such as metadata, forms, or other controls.
 *
 * ```ts
 *   <verdocs-button-panel .icon=${icon}>
 *     <h6>Field Settings</h6>
 *     <form>
 *     <p>
 *       <label>Field Name</label>
 *       <input type="text" placeholder="Field Name..." />
 *     </p>
 *     </form>
 *   </verdocs-button-panel>
 * ```
 */
export class VerdocsButtonPanel {
    constructor() {
        /**
         * SVG icon to display
         */
        this.icon = '';
        // Not marked as @State because it's not the thing that controls our rendering
        this.showing = false;
    }
    componentDidRender() {
        document.body.appendChild(this.panelEl);
        if (this.popperInstance) {
            this.popperInstance.destroy();
        }
        this.popperInstance = createPopper(this.iconEl, this.panelEl, {
        // placement: 'top-end',
        // modifiers: [{name: 'offset', options: {offset: [0, 10]}}],
        });
    }
    disconnectedCallback() {
        if (this.popperInstance) {
            this.popperInstance.destroy();
            this.popperInstance = null;
        }
        if (this.panelEl) {
            this.panelEl.remove();
        }
    }
    async showPanel() {
        var _a, _b;
        (_a = this.panelEl) === null || _a === void 0 ? void 0 : _a.setAttribute('data-show', '');
        (_b = this.popperInstance) === null || _b === void 0 ? void 0 : _b.update().catch(() => { });
        this.showing = true;
        this.hiderEl = document.createElement('div');
        this.hiderEl.id = 'verdocs-button-panel-hider';
        this.hiderEl.style.zIndex = '100';
        this.hiderEl.style.position = 'absolute';
        this.hiderEl.style.top = '0px';
        this.hiderEl.style.left = '0px';
        this.hiderEl.style.right = '0px';
        this.hiderEl.style.bottom = '0px';
        this.hiderEl.onclick = (e) => {
            e.stopPropagation();
            this.toggle();
        };
        document.body.appendChild(this.hiderEl);
    }
    async hidePanel() {
        var _a;
        Array.from(document.getElementsByClassName('verdocs-button-panel-content')).forEach(el => {
            el.removeAttribute('data-show');
        });
        (_a = document.getElementById('verdocs-button-panel-hider')) === null || _a === void 0 ? void 0 : _a.remove();
        this.showing = false;
    }
    async toggle() {
        if (this.showing) {
            await this.hidePanel();
        }
        else {
            await this.showPanel();
        }
    }
    render() {
        return (h(Host, { key: 'c4a19a142c4e228213a78988847a66b9d952ee27' }, h("div", { key: 'd01b744c644e6ae143aa8654c25a15780189cd98', class: "icon", innerHTML: this.icon, onClick: (e) => {
                e.stopPropagation();
                return this.toggle();
            }, ref: el => (this.iconEl = el) }), h("div", { key: '5bc6a60df0c2e15b7fa4da356130618c540e2ec7', role: "tooltip", class: "verdocs-button-panel-content", "data-popper-placement": "bottom", ref: el => (this.panelEl = el) }, h("div", { key: '024f7c9713c9c57dc04d9cceaa93c7a40cb8eaba', "data-popper-arrow": "true", class: "arrow" }), h("slot", { key: '544361c54c163063f4013cc52ea4a12c6baff24b' }))));
    }
    static get is() { return "verdocs-button-panel"; }
    static get originalStyleUrls() {
        return {
            "$": ["verdocs-button-panel.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["verdocs-button-panel.css"]
        };
    }
    static get properties() {
        return {
            "icon": {
                "type": "string",
                "attribute": "icon",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "SVG icon to display"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "defaultValue": "''"
            }
        };
    }
    static get methods() {
        return {
            "showPanel": {
                "complexType": {
                    "signature": "() => Promise<void>",
                    "parameters": [],
                    "references": {
                        "Promise": {
                            "location": "global",
                            "id": "global::Promise"
                        }
                    },
                    "return": "Promise<void>"
                },
                "docs": {
                    "text": "",
                    "tags": []
                }
            },
            "hidePanel": {
                "complexType": {
                    "signature": "() => Promise<void>",
                    "parameters": [],
                    "references": {
                        "Promise": {
                            "location": "global",
                            "id": "global::Promise"
                        }
                    },
                    "return": "Promise<void>"
                },
                "docs": {
                    "text": "",
                    "tags": []
                }
            },
            "toggle": {
                "complexType": {
                    "signature": "() => Promise<void>",
                    "parameters": [],
                    "references": {
                        "Promise": {
                            "location": "global",
                            "id": "global::Promise"
                        }
                    },
                    "return": "Promise<void>"
                },
                "docs": {
                    "text": "",
                    "tags": []
                }
            }
        };
    }
}
//# sourceMappingURL=verdocs-button-panel.js.map
