var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
    return c > 3 && r && Object.defineProperty(target, key, r), r;
};
import { MelodicComponent } from '@melodicdev/core';
import { computePosition, offset, flip, shift } from '../../../utils/positioning/index.js';
import { tooltipTemplate } from './tooltip.template.js';
import { tooltipStyles } from './tooltip.styles.js';
/**
 * ml-tooltip - Tooltip component that shows on hover/focus
 *
 * @example
 * ```html
 * <ml-tooltip content="This is a tooltip">
 *   <ml-button>Hover me</ml-button>
 * </ml-tooltip>
 *
 * <ml-tooltip content="Bottom tooltip" placement="bottom">
 *   <span>Hover for info</span>
 * </ml-tooltip>
 * ```
 *
 * @slot default - The trigger element
 */
let TooltipComponent = class TooltipComponent {
    constructor() {
        /** Tooltip content text */
        this.content = '';
        /** Tooltip placement */
        this.placement = 'top';
        /** Delay before showing (ms) */
        this.delay = 200;
        /** Internal: visibility state */
        this.isVisible = false;
        this._showTimeout = null;
        this._hideTimeout = null;
        this.show = () => {
            if (this._hideTimeout) {
                clearTimeout(this._hideTimeout);
                this._hideTimeout = null;
            }
            this._showTimeout = window.setTimeout(() => {
                this.isVisible = true;
                this.updatePosition();
            }, this.delay);
        };
        this.hide = () => {
            if (this._showTimeout) {
                clearTimeout(this._showTimeout);
                this._showTimeout = null;
            }
            this._hideTimeout = window.setTimeout(() => {
                this.isVisible = false;
            }, 100);
        };
    }
    onInit() {
        // Initial setup if needed
    }
    onDestroy() {
        if (this._showTimeout)
            clearTimeout(this._showTimeout);
        if (this._hideTimeout)
            clearTimeout(this._hideTimeout);
    }
    updatePosition() {
        const trigger = this.elementRef.shadowRoot?.querySelector('.ml-tooltip__trigger');
        const tooltip = this.elementRef.shadowRoot?.querySelector('.ml-tooltip__content');
        const arrow = this.elementRef.shadowRoot?.querySelector('.ml-tooltip__arrow');
        if (!trigger || !tooltip)
            return;
        const { x, y, placement } = computePosition(trigger, tooltip, {
            placement: this.placement,
            middleware: [offset(8), flip(), shift({ padding: 8 })]
        });
        tooltip.style.left = `${x}px`;
        tooltip.style.top = `${y}px`;
        tooltip.setAttribute('data-placement', placement);
        // Position arrow
        if (arrow) {
            const side = placement.split('-')[0];
            arrow.style.left = '';
            arrow.style.right = '';
            arrow.style.top = '';
            arrow.style.bottom = '';
            if (side === 'top' || side === 'bottom') {
                arrow.style.left = '50%';
                arrow.style.marginLeft = '-4px';
            }
            else {
                arrow.style.top = '50%';
                arrow.style.marginTop = '-4px';
            }
        }
    }
};
TooltipComponent = __decorate([
    MelodicComponent({
        selector: 'ml-tooltip',
        template: tooltipTemplate,
        styles: tooltipStyles,
        attributes: ['content', 'placement', 'delay']
    })
], TooltipComponent);
export { TooltipComponent };
