import { Host, h } from "@stencil/core";
import { getTooltipElement, tinyMDtoHTML } from "../../utils/helpers";
import { computePosition, offset, shift, arrow, autoPlacement, flip } from "@floating-ui/dom";
const showEvents = ['mouseenter'];
const hideEvents = ['mouseleave', 'blur'];
export class XTooltip {
    constructor() {
        this.content = undefined;
        this.align = 'top';
    }
    /**
     * On component did loaded hook
     */
    componentDidLoad() {
        this.tooltip = getTooltipElement();
        showEvents.forEach(event => {
            this.el.addEventListener(event, this.showHandler.bind(this));
        });
        hideEvents.forEach(event => {
            this.el.addEventListener(event, this.hideHandler.bind(this));
        });
    }
    /**
     * On component did destroyed hook
     */
    disconectedCallback() {
        showEvents.forEach(event => {
            this.el.removeEventListener(event, this.showHandler);
        });
        hideEvents.forEach(event => {
            this.el.removeEventListener(event, this.hideHandler);
        });
    }
    /**
     * Show tooltip overlay
     */
    showHandler() {
        this.tooltip.setAttribute('data-show', '');
        this.tooltip.querySelector('span').innerHTML = tinyMDtoHTML(this.content) || '';
        const arrowEl = this.tooltip.querySelector('.tooltip-arrow');
        computePosition(this.el, this.tooltip, {
            placement: this.align,
            middleware: [this.align == 'auto' ? autoPlacement() : flip(), shift({ padding: 10 }), offset(4), arrow({ element: arrowEl })],
        }).then(({ x, y, middlewareData, placement }) => {
            this.tooltip.style.left = `${x}px`;
            this.tooltip.style.top = `${y}px`;
            if (middlewareData.arrow) {
                const { x: arrowX, y: arrowY } = middlewareData.arrow;
                const staticSide = {
                    top: 'bottom',
                    right: 'left',
                    bottom: 'top',
                    left: 'right',
                }[placement.split('-')[0]];
                Object.assign(arrowEl.style, {
                    left: arrowX != null ? `${arrowX}px` : '',
                    top: arrowY != null ? `${arrowY}px` : '',
                    right: '',
                    bottom: '',
                    [staticSide]: '-4px',
                });
            }
        });
    }
    /**
     * Hide tooltip overlay
     */
    hideHandler() {
        setTimeout(() => {
            this.tooltip.removeAttribute('data-show');
            this.tooltip.querySelector('span').innerHTML = '';
        }, 50);
    }
    /**
     * Render element
     */
    render() {
        return h(Host, { key: '5a5634c258cb53ebbb84bf5381bdbd9727be30c9', "aria-label": this.content });
    }
    static get is() { return "x-tooltip"; }
    static get originalStyleUrls() {
        return {
            "$": ["./style.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["style.css"]
        };
    }
    static get properties() {
        return {
            "content": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Element content text to show in tooltip"
                },
                "attribute": "content",
                "reflect": false
            },
            "align": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "TooltipAlignType",
                    "resolved": "\"auto\" | \"bottom\" | \"left\" | \"right\" | \"top\"",
                    "references": {
                        "TooltipAlignType": {
                            "location": "local",
                            "path": "/opt/atlassian/pipelines/agent/build/src/components/x-tooltip/component.tsx",
                            "id": "src/components/x-tooltip/component.tsx::TooltipAlignType"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Tooltip aligment to show over element"
                },
                "attribute": "align",
                "reflect": false,
                "defaultValue": "'top'"
            }
        };
    }
    static get elementRef() { return "el"; }
}
