import { h } from "@stencil/core";
export class SpwTooltip {
    constructor() {
        /** Titre du tooltip */
        this.tooltipTitle = '';
        /** Texte du tooltip */
        this.tooltipText = '';
        /** Positionnement du tooltip */
        this.direction = 'top';
        /** Curseur du tooltip */
        this.cursor = 'help';
        this.visible = true;
        this.isVisible = false;
        this.showTooltip = () => {
            if (!this.visible)
                return;
            this.isVisible = true;
            this.createTooltip();
            requestAnimationFrame(() => {
                this.positionTooltip();
            });
            window.addEventListener('scroll', this.handleScrollOrResize, true);
            window.addEventListener('resize', this.handleScrollOrResize);
        };
        this.hideTooltip = () => {
            this.isVisible = false;
            this.removeTooltipFromDOM();
            window.removeEventListener('scroll', this.handleScrollOrResize, true);
            window.removeEventListener('resize', this.handleScrollOrResize);
        };
    }
    connectedCallback() {
        this.handleScrollOrResize = this.handleScrollOrResize.bind(this);
    }
    disconnectedCallback() {
        window.removeEventListener('scroll', this.handleScrollOrResize, true);
        window.removeEventListener('resize', this.handleScrollOrResize);
        this.removeTooltipFromDOM();
    }
    updateTooltipVisibility() {
        if (this.tooltipEl) {
            this.tooltipEl.style.display = this.visible ? 'flex' : 'none';
        }
    }
    componentWillRender() {
        this.updateTooltipVisibility();
    }
    componentDidUpdate() {
        this.updateTooltipVisibility();
    }
    handleScrollOrResize() {
        if (this.isVisible) {
            this.positionTooltip();
        }
    }
    createTooltip() {
        if (!this.tooltipEl) {
            this.tooltipEl = document.createElement('div');
            this.tooltipEl.className = `spw-tooltip-fixed spw-tooltip-fixed--${this.direction}`;
            this.tooltipEl.setAttribute('role', 'tooltip');
            if (this.tooltipTitle) {
                const title = document.createElement('strong');
                title.className = 'spw-tooltip__title';
                title.textContent = this.tooltipTitle;
                this.tooltipEl.appendChild(title);
            }
            if (this.tooltipText) {
                const text = document.createElement('div');
                text.textContent = this.tooltipText;
                this.tooltipEl.appendChild(text);
            }
            document.body.appendChild(this.tooltipEl);
        }
    }
    removeTooltipFromDOM() {
        if (this.tooltipEl && this.tooltipEl.parentNode) {
            this.tooltipEl.parentNode.removeChild(this.tooltipEl);
        }
        this.tooltipEl = null;
    }
    positionTooltip() {
        var _a;
        if (!this.tooltipEl)
            return;
        const target = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.spw-tooltip__target');
        if (!target)
            return;
        const rect = target.getBoundingClientRect();
        const tooltip = this.tooltipEl;
        tooltip.style.visibility = 'hidden';
        tooltip.style.display = 'flex';
        tooltip.style.position = 'fixed';
        tooltip.style.top = '0px';
        tooltip.style.left = '0px';
        tooltip.style.maxWidth = this.maxWidth + 'px' || '100%';
        const tooltipRect = tooltip.getBoundingClientRect();
        let top = 0;
        let left = 0;
        switch (this.direction) {
            case 'top':
                top = rect.top - tooltipRect.height - 8;
                left = rect.left + (rect.width - tooltipRect.width) / 2;
                break;
            case 'bottom':
                top = rect.bottom + 8;
                left = rect.left + (rect.width - tooltipRect.width) / 2;
                break;
            case 'left':
                top = rect.top + (rect.height - tooltipRect.height) / 2;
                left = rect.left - tooltipRect.width - 8;
                break;
            case 'right':
            default:
                top = rect.top + (rect.height - tooltipRect.height) / 2;
                left = rect.right + 8;
                break;
        }
        tooltip.style.top = `${top}px`;
        tooltip.style.left = `${left}px`;
        tooltip.style.zIndex = '9999';
        tooltip.style.visibility = 'visible';
    }
    get classes() {
        return {
            'spw-tooltip__target': true,
            [`spw-tooltip__target--${this.cursor}`]: true,
        };
    }
    render() {
        return (h("div", { key: '06c1bd83ab16650d4c7f8ddf6a5a38f6e30233af', class: this.classes, onMouseEnter: this.showTooltip, onMouseLeave: this.hideTooltip }, h("slot", { key: 'aa259f875573c1d636822c852212320e83710e7f' })));
    }
    static get is() { return "spw-tooltip"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() {
        return {
            "$": ["spw-tooltip.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["spw-tooltip.css"]
        };
    }
    static get properties() {
        return {
            "tooltipTitle": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Titre du tooltip"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "tooltip-title",
                "defaultValue": "''"
            },
            "tooltipText": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Texte du tooltip"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "tooltip-text",
                "defaultValue": "''"
            },
            "maxWidth": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Largeur maximale du tooltip"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "max-width"
            },
            "direction": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "'top' | 'bottom' | 'left' | 'right'",
                    "resolved": "\"bottom\" | \"left\" | \"right\" | \"top\"",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Positionnement du tooltip"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "direction",
                "defaultValue": "'top'"
            },
            "cursor": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "'pointer' | 'default' | 'help' | 'disabled'",
                    "resolved": "\"default\" | \"disabled\" | \"help\" | \"pointer\"",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Curseur du tooltip"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "cursor",
                "defaultValue": "'help'"
            },
            "visible": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "visible",
                "defaultValue": "true"
            }
        };
    }
    static get states() {
        return {
            "isVisible": {}
        };
    }
    static get elementRef() { return "host"; }
}
