import { h } from "@stencil/core";
import { computePosition, getNextZIndex } from "../../utils/popup-manager";
/**
 * Tooltip 文字提示组件
 * 鼠标悬停或点击时显示提示文字
 */
export class Tooltip {
    el;
    /** 提示文字 */
    content = '';
    /** 弹出位置 */
    placement = 'top';
    /** 触发方式 */
    trigger = 'hover';
    /** 是否禁用 */
    disabled = false;
    /** 是否显示箭头 */
    showArrow = true;
    visible = false;
    popupStyle = {};
    triggerRef;
    popupRef;
    hideTimer;
    show = () => {
        if (this.disabled)
            return;
        clearTimeout(this.hideTimer);
        this.visible = true;
        requestAnimationFrame(() => this.updatePosition());
    };
    hide = () => {
        this.hideTimer = setTimeout(() => { this.visible = false; }, 100);
    };
    toggle = () => {
        if (this.disabled)
            return;
        if (this.visible) {
            this.hide();
        }
        else {
            this.show();
        }
    };
    updatePosition() {
        if (!this.triggerRef || !this.popupRef)
            return;
        const triggerRect = this.triggerRef.getBoundingClientRect();
        const { width, height } = this.popupRef.getBoundingClientRect();
        const pos = computePosition(triggerRect, width, height, this.placement, 8);
        this.popupStyle = {
            top: `${pos.top}px`,
            left: `${pos.left}px`,
            zIndex: String(getNextZIndex()),
        };
    }
    render() {
        const triggerEvents = this.trigger === 'hover'
            ? { onMouseEnter: this.show, onMouseLeave: this.hide }
            : { onClick: this.toggle };
        return (h("div", { key: 'e98d79b104fc92f63d77cbd87c490d84e0646c64', class: "hb-tooltip", ...triggerEvents }, h("div", { key: '74088a95833070259d447d57e03a894f20d0e044', ref: (el) => { this.triggerRef = el; }, class: "hb-tooltip__trigger" }, h("slot", { key: 'ce84437a1fedd763630764a5627763a4601d195e' })), this.visible && (h("div", { key: '1b5b74c439a5925c3cf10fc552369bd83354fcf4', ref: (el) => { this.popupRef = el; }, class: "hb-tooltip__popup", style: this.popupStyle, onMouseEnter: () => this.trigger === 'hover' && this.show(), onMouseLeave: () => this.trigger === 'hover' && this.hide() }, this.showArrow && h("div", { key: '73b08948dcc030a487a0d0f11afbb2fb4bcbdc51', class: "hb-tooltip__arrow" }), h("div", { key: '564f396c5eb5e3cb5bffe7dc8ec956c54bfc484d', class: "hb-tooltip__content" }, this.content)))));
    }
    static get is() { return "hb-tooltip"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() {
        return {
            "$": ["tooltip.css"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["tooltip.css"]
        };
    }
    static get properties() {
        return {
            "content": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "\u63D0\u793A\u6587\u5B57"
                },
                "getter": false,
                "setter": false,
                "attribute": "content",
                "reflect": false,
                "defaultValue": "''"
            },
            "placement": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "Placement",
                    "resolved": "\"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": "../../utils/popup-manager",
                            "id": "src/utils/popup-manager.ts::Placement"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "\u5F39\u51FA\u4F4D\u7F6E"
                },
                "getter": false,
                "setter": false,
                "attribute": "placement",
                "reflect": false,
                "defaultValue": "'top'"
            },
            "trigger": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "'hover' | 'click'",
                    "resolved": "\"click\" | \"hover\"",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "\u89E6\u53D1\u65B9\u5F0F"
                },
                "getter": false,
                "setter": false,
                "attribute": "trigger",
                "reflect": false,
                "defaultValue": "'hover'"
            },
            "disabled": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "\u662F\u5426\u7981\u7528"
                },
                "getter": false,
                "setter": false,
                "attribute": "disabled",
                "reflect": false,
                "defaultValue": "false"
            },
            "showArrow": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "\u662F\u5426\u663E\u793A\u7BAD\u5934"
                },
                "getter": false,
                "setter": false,
                "attribute": "show-arrow",
                "reflect": false,
                "defaultValue": "true"
            }
        };
    }
    static get states() {
        return {
            "visible": {},
            "popupStyle": {}
        };
    }
    static get elementRef() { return "el"; }
}
//# sourceMappingURL=Tooltip.js.map
