import { createPopper } from "@popperjs/core";
import { h, Host } from "@stencil/core";
// import {Component, Event, EventEmitter, h, Host, Prop, State} from '@stencil/core';
/**
 * Displays a simple help icon. Upon hover or focus, a tooltip will be displayed with help text.
 *
 * ```ts
 * <verdocs-toolbar-icon text="Sample tooltip text" icon={CalendarIcon} />
 * ```
 */
export class VerdocsToolbarIcon {
    constructor() {
        /**
         * Help text to display on hover/focus
         */
        this.text = '';
        /**
         * SVG icon to display
         */
        this.icon = '';
        /**
         * Override the Popper "placement" setting
         */
        this.placement = 'bottom';
        /**
         * Triggered when the icon is pressed
         */
        // @Event({composed: true}) press: EventEmitter;
        this.containerId = `verdocs-toolbar-icon-${Math.random().toString(36).substring(2, 11)}`;
    }
    componentDidLoad() {
        this.popperInstance = createPopper(this.iconEl, this.tooltip, {
            placement: this.placement,
            modifiers: this.placement === 'left' ? [{ name: 'offset', options: { offset: [0, 20] } }] : [],
        });
        // placement: 'top-end',
        // modifiers: [{name: 'offset', options: {offset: [0, 10]}}],
        // });
    }
    disconnectedCallback() {
        if (this.popperInstance) {
            this.popperInstance.destroy();
            this.popperInstance = null;
        }
    }
    show() {
        var _a, _b;
        (_a = this.tooltip) === null || _a === void 0 ? void 0 : _a.setAttribute('data-show', '');
        (_b = this.popperInstance) === null || _b === void 0 ? void 0 : _b.update().catch(() => { });
    }
    hide() {
        var _a;
        (_a = this.tooltip) === null || _a === void 0 ? void 0 : _a.removeAttribute('data-show');
    }
    // handlePress() {
    //   this.press?.emit();
    // }
    render() {
        return (h(Host, { key: '656b7717e9f46bf4d331a6e60f0aabcaae611018', class: {} }, h("div", { key: '4c14eeea26b0dced9d82e26e909fc1e85d11cadd', "aria-describedby": this.containerId, class: "icon", innerHTML: this.icon, onMouseEnter: () => this.show(), onFocus: () => this.show(), onMouseLeave: () => this.hide(), onBlur: () => this.hide(), ref: el => (this.iconEl = el) }), h("div", { key: '281a88b6d6fce3950a5beb24c56d3399f0125cfa', id: this.containerId, role: "tooltip", class: "tooltip", "data-popper-placement": this.placement, ref: el => (this.tooltip = el) }, this.text, h("div", { key: 'f0618b5716de254e43eecd233cc9d882a895e124', "data-popper-arrow": "true", class: "arrow" }))));
    }
    static get is() { return "verdocs-toolbar-icon"; }
    static get originalStyleUrls() {
        return {
            "$": ["verdocs-toolbar-icon.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["verdocs-toolbar-icon.css"]
        };
    }
    static get properties() {
        return {
            "text": {
                "type": "string",
                "attribute": "text",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Help text to display on hover/focus"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "defaultValue": "''"
            },
            "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": "''"
            },
            "placement": {
                "type": "string",
                "attribute": "placement",
                "mutable": false,
                "complexType": {
                    "original": "Placement",
                    "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": {
                        "Placement": {
                            "location": "import",
                            "path": "@popperjs/core/lib/enums",
                            "id": "node_modules::Placement"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Override the Popper \"placement\" setting"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "defaultValue": "'bottom'"
            }
        };
    }
    static get states() {
        return {
            "containerId": {}
        };
    }
}
//# sourceMappingURL=verdocs-toolbar-icon.js.map
