import { h } from "@stencil/core";
import { createPopper } from "@popperjs/core";
import { trackComponent } from "../../global/utils/tracking";
import { isNestedInIfxComponent } from "../../global/utils/dom-utils";
import { detectFramework } from "../../global/utils/framework-detection";
export class Tooltip {
    constructor() {
        this.tooltipVisible = false;
        this.header = '';
        this.text = '';
        this.position = 'auto';
        this.internalPosition = 'auto';
        this.variant = 'compact';
        this.popperInstance = null;
        this.onMouseEnter = () => {
            var _a, _b;
            // Enable the event listeners immediately
            (_a = this.popperInstance) === null || _a === void 0 ? void 0 : _a.setOptions((options) => (Object.assign(Object.assign({}, options), { modifiers: [
                    ...options.modifiers,
                    { name: 'eventListeners', enabled: true },
                ] })));
            // Initialize the popper instance
            this.initializePopper();
            // Make the tooltip visible
            this.tooltipVisible = true;
            this.tooltipEl.style.display = 'block';
            // Update the popper instance immediately after initialization
            (_b = this.popperInstance) === null || _b === void 0 ? void 0 : _b.update();
        };
        this.onMouseLeave = () => {
            this.tooltipVisible = false;
            this.tooltipEl.style.display = 'none';
        };
        this.onClick = () => {
            var _a;
            if (this.variant.toLowerCase() === 'dismissible') {
                this.initializePopper();
                this.tooltipVisible = !this.tooltipVisible;
                this.tooltipEl.style.display = this.tooltipVisible ? 'block' : 'none';
                (_a = this.popperInstance) === null || _a === void 0 ? void 0 : _a.update();
            }
        };
        this.onDismissClick = () => {
            this.tooltipVisible = false;
            this.tooltipEl.style.display = 'none';
        };
    }
    componentWillLoad() {
        if (this.variant.toLowerCase().trim() === "") {
            this.variant = 'compact';
        }
    }
    async componentDidLoad() {
        if (!isNestedInIfxComponent(this.el)) {
            const framework = detectFramework();
            trackComponent('ifx-tooltip', await framework);
        }
        const slotElement = this.el.shadowRoot.querySelector('.tooltip__container').firstChild;
        if (this.variant.toLowerCase() === 'compact' || this.variant.toLowerCase() === 'extended') {
            slotElement.addEventListener('mouseenter', this.onMouseEnter);
            slotElement.addEventListener('mouseleave', this.onMouseLeave);
        }
        else {
            slotElement.addEventListener('click', this.onClick);
        }
    }
    initializePopper() {
        if (this.popperInstance)
            return;
        this.referenceEl = this.el;
        this.tooltipEl;
        if (this.variant.toLowerCase() === 'compact') {
            this.tooltipEl = this.el.shadowRoot.querySelector('.tooltip-compact');
        }
        else if (this.variant.toLowerCase() === 'dismissible') {
            this.tooltipEl = this.el.shadowRoot.querySelector('.tooltip-dismissible');
        }
        else {
            this.tooltipEl = this.el.shadowRoot.querySelector('.tooltip-extended');
        }
        const effectivePosition = this.position === 'auto' ? this.determineBestPosition() : this.position;
        // Set the internalPosition
        this.internalPosition = effectivePosition;
        if (this.tooltipEl && this.referenceEl) {
            this.popperInstance = createPopper(this.referenceEl, this.tooltipEl, {
                placement: this.internalPosition,
                modifiers: [
                    {
                        name: 'offset',
                        options: {
                            offset: [0, 8] // this offset should be adjusted to ensure the tooltip doesn't overlap its reference element
                        }
                    },
                    {
                        name: 'arrow',
                        options: {
                            element: '.tooltip-arrow-svg'
                        }
                    }
                ]
            });
        }
        // Add this line to set the 'data-placement' attribute on the tooltip
        this.tooltipEl.setAttribute('data-placement', effectivePosition);
    }
    determineBestPosition() {
        // This is a simplified version, you can enhance this based on available viewport space.
        const rect = this.referenceEl.getBoundingClientRect();
        const yOffset = window.scrollY; // Get current scroll position
        const xOffset = window.scrollX; // Get current horizontal scroll position
        const verticalHalfwayPoint = rect.top + yOffset + rect.height / 2;
        const horizontalHalfwayPoint = rect.left + xOffset + rect.width / 2;
        if (this.position === 'auto') {
            if (verticalHalfwayPoint > window.innerHeight / 2) {
                if (horizontalHalfwayPoint > window.innerWidth / 2) {
                    return 'top-end';
                }
                else {
                    return 'top-start';
                }
            }
            else {
                if (horizontalHalfwayPoint > window.innerWidth / 2) {
                    return 'bottom-end';
                }
                else {
                    return 'bottom-start';
                }
            }
        }
        else {
            return this.position;
        }
    }
    positionChanged(newVal) {
        var _a;
        this.internalPosition = newVal;
        (_a = this.popperInstance) === null || _a === void 0 ? void 0 : _a.destroy();
        this.popperInstance = null; // Force re-initialization on next mouse enter
    }
    disconnectedCallback() {
        var _a;
        (_a = this.popperInstance) === null || _a === void 0 ? void 0 : _a.destroy();
    }
    render() {
        const tooltipDismissible = {
            'tooltip-dismissible': true,
            'visible': this.tooltipVisible,
        };
        const tooltipCompact = {
            'tooltip-compact': true,
            'visible': this.tooltipVisible,
        };
        const tooltipExtended = {
            'tooltip-extended': true,
            'visible': this.tooltipVisible,
        };
        return (h("div", { key: 'a881b057a41dc86423e211c4ec7625c21d407255', "aria-label": "a tooltip showing important information", "aria-value": this.header, class: "tooltip__container" }, h("slot", { key: 'dda39c004b43a2c67f4b74d02170b51284d8814f' }), this.variant.toLowerCase() === 'dismissible' && h("div", { key: 'fd5ed36163b2bb41d7372da79d985ebeb08892b7', class: tooltipDismissible }, h("button", { key: '3944c7d30273060c12afac4cf2f700178d74929b', "aria-label": "Close Tooltip", class: "close-button", onClick: this.onDismissClick }, h("ifx-icon", { key: '359160f4053981852a355d8f951212721e5adb7e', icon: "cross16" })), h("div", { key: '2d33eaa15a2e84a178d02b0de4dc2191f756931c', class: "tooltip-dismissible-content" }, this.header && h("div", { key: 'b50487f276f52360cad2541cd27758359276dc5e', class: "tooltip-dismissible-header" }, this.header), h("div", { key: 'e7353e5a44ec5e4b137d59586766e2f1b86005df', class: "tooltip-dismissible-body" }, this.text)), h("svg", { key: '9319792e9d6647c81554b725d0b4a392da03e730', class: "tooltip-arrow-svg", width: "12", height: "8", viewBox: "0 0 12 8", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: 'd49f8659262de9fcd6dc103e6adb423ca394c414', id: "Indicator", d: "M6 0L12 8L0 8L6 0Z", fill: "#1D1D1D" }))), this.variant.toLowerCase() === 'compact' &&
            h("div", { key: '9493ab9df53f3659cb860336b5440d6b5702f561', class: tooltipCompact }, this.text, h("svg", { key: '30d6a74b4bf7f52de3a55668e678aebbd704a242', class: "tooltip-arrow-svg", width: "12", height: "8", viewBox: "0 0 12 8", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: 'b98e2c0074c0629913d21a0aa425e99e842579f2', id: "Indicator", d: "M6 0L12 8L0 8L6 0Z", fill: "#1D1D1D" }))), this.variant.toLowerCase() === 'extended' &&
            h("div", { key: '82212a17b2a1e821d94361c14c6067302aeddfe4', class: tooltipExtended }, h("slot", { key: 'f5f12810af50b912a7b6e800d5ec59e13aa110d7', name: "icon" }, this.icon ? h("div", { class: "extended_icon" }, h("ifx-icon", { icon: this.icon })) :
                h("svg", { class: "extended_icon", xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", fill: "none", viewBox: "0 0 24 24" }, h("path", { stroke: "#fff", "stroke-linecap": "round", "stroke-linejoin": "round", d: "M20.5 2.5h-16a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-16a2 2 0 0 0-2-2Z" }), h("path", { stroke: "#fff", d: "M19 17H6l2.5-4 2.097 2.516.405.486.379-.506 4.118-5.49.003-.002L19 17Z" }), h("path", { fill: "#fff", d: "M10 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z" }))), h("div", { key: 'fcd8d2b0b341f7f79bccb21c5a938d8f605db5b9', class: "tooltip-extended-content" }, this.header && h("div", { key: '2033aec377ef2d91cc1e67716be96b6859512d51', class: "tooltip-extended-header" }, this.header), h("div", { key: 'c798a0eb944f29076082c508e2b4d036a75c4c1e', class: "tooltip-extended-body" }, this.text)), h("svg", { key: 'dcbcebacadab835fe2c6679cb174cabec4a7eb13', class: "tooltip-arrow-svg", width: "12", height: "8", viewBox: "0 0 12 8", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '3c4186a7596d825b685bfd02e62a20a23a90ee4c', id: "Indicator", d: "M6 0L12 8L0 8L6 0Z", fill: "#1D1D1D" })))));
    }
    static get is() { return "ifx-tooltip"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() {
        return {
            "$": ["tooltip.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["tooltip.css"]
        };
    }
    static get properties() {
        return {
            "header": {
                "type": "string",
                "attribute": "header",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "defaultValue": "''"
            },
            "text": {
                "type": "string",
                "attribute": "text",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "defaultValue": "''"
            },
            "position": {
                "type": "string",
                "attribute": "position",
                "mutable": false,
                "complexType": {
                    "original": "'bottom-start' | 'top-start' | 'left' | 'bottom-end' | 'top-end' | 'right' | 'bottom' | 'top' | 'auto'",
                    "resolved": "\"auto\" | \"bottom\" | \"bottom-end\" | \"bottom-start\" | \"left\" | \"right\" | \"top\" | \"top-end\" | \"top-start\"",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "defaultValue": "'auto'"
            },
            "variant": {
                "type": "string",
                "attribute": "variant",
                "mutable": false,
                "complexType": {
                    "original": "'compact' | 'dismissible' | 'extended'",
                    "resolved": "\"compact\" | \"dismissible\" | \"extended\"",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "defaultValue": "'compact'"
            },
            "icon": {
                "type": "string",
                "attribute": "icon",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false
            }
        };
    }
    static get states() {
        return {
            "tooltipVisible": {},
            "internalPosition": {}
        };
    }
    static get elementRef() { return "el"; }
    static get watchers() {
        return [{
                "propName": "position",
                "methodName": "positionChanged"
            }];
    }
}
//# sourceMappingURL=tooltip.js.map
