import { library } from '@fortawesome/fontawesome-svg-core';
import { faInfoCircle } from '@fortawesome/free-solid-svg-icons';
import { createPopper } from '@popperjs/core';
import { h } from "@stencil/core";
library.add(faInfoCircle);
export class Tooltip {
    constructor() {
        this.container = document;
        this.active = false;
    }
    componentDidLoad() {
        const reference = this.target
            ? this.container.querySelector(this.target)
            : this.el.shadowRoot.querySelector('bce-icon');
        const tooltip = this.el.shadowRoot.querySelector('div');
        if (!reference) {
            console.warn(`[bce-tooltip] Target not found: ${this.target}`);
            return;
        }
        for (const event of ['mouseenter', 'focus'])
            reference.addEventListener(event, () => (this.active = true));
        for (const event of ['mouseleave', 'blur'])
            reference.addEventListener(event, () => (this.active = false));
        createPopper(reference, tooltip, {
            placement: (this.placement || 'bottom'),
            strategy: 'fixed',
            modifiers: [{ name: 'offset', options: { offset: [0, 2] } }]
        });
    }
    render() {
        const icon = this.icon || 'fas:info-circle';
        return [
            !this.target && h("bce-icon", { raw: icon, "fixed-width": true }),
            h("div", { "data-active": this.active },
                h("slot", null))
        ];
    }
    static get is() { return "bce-tooltip"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() { return {
        "$": ["bce-tooltip.scss"]
    }; }
    static get styleUrls() { return {
        "$": ["bce-tooltip.css"]
    }; }
    static get properties() { return {
        "container": {
            "type": "unknown",
            "mutable": false,
            "complexType": {
                "original": "ParentNode",
                "resolved": "ParentNode",
                "references": {
                    "ParentNode": {
                        "location": "global"
                    }
                }
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "defaultValue": "document as ParentNode"
        },
        "placement": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": true,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "placement",
            "reflect": true
        },
        "target": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": true,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "target",
            "reflect": true
        },
        "icon": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": true,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "icon",
            "reflect": true
        }
    }; }
    static get states() { return {
        "active": {}
    }; }
    static get elementRef() { return "el"; }
}
