import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
/**
 * Help tooltip for data form fields
 * Lightweight implementation using title attribute and hover div
 */
import { useState, useRef } from 'react';
import { cn } from '../../../utils/cn.js';
export function DataFormHelpTooltip({ help_tooltip, computed_formula }) {
    const [is_visible, set_is_visible] = useState(false);
    const timeout_ref = useRef(null);
    const show_formula = help_tooltip.show_formula && (help_tooltip.formula_display || computed_formula);
    const has_content = help_tooltip.text || show_formula || help_tooltip.link;
    if (!has_content)
        return null;
    const handle_mouse_enter = () => {
        if (timeout_ref.current)
            clearTimeout(timeout_ref.current);
        set_is_visible(true);
    };
    const handle_mouse_leave = () => {
        timeout_ref.current = setTimeout(() => set_is_visible(false), 150);
    };
    return (_jsxs("div", { className: "cls_data_form_help_tooltip relative inline-flex", onMouseEnter: handle_mouse_enter, onMouseLeave: handle_mouse_leave, children: [_jsx("button", { type: "button", className: cn('inline-flex items-center justify-center w-4 h-4 rounded-full', 'text-[10px] font-bold text-gray-400 border border-gray-300', 'hover:text-gray-600 hover:border-gray-400 cursor-help'), tabIndex: -1, "aria-label": "Help", children: "?" }), is_visible && (_jsxs("div", { className: cn('absolute z-50 bottom-full left-1/2 -translate-x-1/2 mb-1', 'bg-gray-800 text-white text-xs rounded px-2.5 py-1.5', 'shadow-lg max-w-[250px] whitespace-normal'), children: [help_tooltip.text && _jsx("p", { children: help_tooltip.text }), show_formula && (_jsx("p", { className: "mt-1 font-mono text-[10px] text-gray-300", children: help_tooltip.formula_display || computed_formula })), help_tooltip.link && (_jsx("a", { href: help_tooltip.link, target: "_blank", rel: "noopener noreferrer", className: "mt-1 block text-blue-300 underline text-[10px]", children: "Learn more" })), _jsx("div", { className: "absolute top-full left-1/2 -translate-x-1/2 border-4 border-transparent border-t-gray-800" })] }))] }));
}
//# sourceMappingURL=data_form_help_tooltip.js.map