import { h } from "@stencil/core";
import { computePosition, flip, shift, offset, arrow } from "@floating-ui/dom";
export class ZTooltip {
    hostElement;
    text;
    position = 'top';
    disabled = false;
    delay = 300;
    isVisible = false;
    wrapperEl;
    tooltipEl;
    arrowEl;
    showTimeout;
    hideTimeout;
    disconnectedCallback() {
        clearTimeout(this.showTimeout);
        clearTimeout(this.hideTimeout);
    }
    async updatePosition() {
        if (!this.wrapperEl || !this.tooltipEl || !this.arrowEl)
            return;
        const placement = this.position === 'top'
            ? 'top'
            : this.position === 'bottom'
                ? 'bottom'
                : this.position === 'left'
                    ? 'left'
                    : 'right';
        const { x, y, placement: finalPlacement, middlewareData } = await computePosition(this.wrapperEl, this.tooltipEl, {
            placement,
            middleware: [
                offset(8),
                flip(),
                shift({ padding: 5 }),
                arrow({ element: this.arrowEl }),
            ],
        });
        Object.assign(this.tooltipEl.style, {
            left: `${x}px`,
            top: `${y}px`,
        });
        // Position the arrow
        const { x: arrowX, y: arrowY } = middlewareData.arrow || {};
        const staticSide = {
            top: 'bottom',
            right: 'left',
            bottom: 'top',
            left: 'right',
        }[finalPlacement.split('-')[0]];
        Object.assign(this.arrowEl.style, {
            left: arrowX != null ? `${arrowX}px` : '',
            top: arrowY != null ? `${arrowY}px` : '',
            right: '',
            bottom: '',
            [staticSide]: '-4px',
        });
    }
    handleMouseEnter = () => {
        if (this.disabled || !this.text)
            return;
        clearTimeout(this.hideTimeout);
        this.showTimeout = window.setTimeout(() => {
            this.isVisible = true;
            this.updatePosition();
        }, this.delay);
    };
    handleMouseLeave = () => {
        clearTimeout(this.showTimeout);
        this.hideTimeout = window.setTimeout(() => {
            this.isVisible = false;
        }, 100);
    };
    render() {
        if (this.disabled || !this.text) {
            return (h("div", { class: "z-tooltip-wrapper" }, h("slot", null)));
        }
        const texts = this.text.split('\n');
        return (h("div", { class: "z-tooltip-wrapper", ref: el => (this.wrapperEl = el), onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave }, h("slot", null), h("div", { ref: el => (this.tooltipEl = el), class: `z-tooltip-floating ${this.isVisible ? 'z-tooltip-visible' : ''}`, role: "tooltip" }, texts.map((line, index) => (h("slot", { key: index }, line, index < texts.length - 1 && h("br", null)))), h("div", { ref: el => (this.arrowEl = el), class: "z-tooltip-arrow" }))));
    }
    static get is() { return "z-tooltip"; }
    static get originalStyleUrls() {
        return {
            "$": ["z-tooltip.css"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["z-tooltip.css"]
        };
    }
    static get properties() {
        return {
            "text": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "text"
            },
            "position": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "'top' | 'bottom' | 'left' | 'right'",
                    "resolved": "\"bottom\" | \"left\" | \"right\" | \"top\"",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "position",
                "defaultValue": "'top'"
            },
            "disabled": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "disabled",
                "defaultValue": "false"
            },
            "delay": {
                "type": "number",
                "mutable": false,
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "delay",
                "defaultValue": "300"
            }
        };
    }
    static get states() {
        return {
            "isVisible": {}
        };
    }
    static get elementRef() { return "hostElement"; }
}
