/* @oracle/oraclejet-preact: undefined */
'use strict';

var jsxRuntime = require('preact/jsx-runtime');
var Layer = require('./Layer-2352de5e.js');
require('preact/compat');
require('./LayerHost-8ec73638.js');
var Floating = require('./Floating-dd6667de.js');
var hooks = require('preact/hooks');
var hooks_PRIVATE_useDatatip_themes_useDatatip_css = require('./hooks/PRIVATE_useDatatip/themes/useDatatip.css.js');
var useId = require('./useId-6c0eeb27.js');
var datatipUtils = require('./datatipUtils-1f747b7f.js');
var useVisHover = require('./useVisHover-ad36112d.js');
var mergeProps = require('./mergeProps-e3da7237.js');

/**
 * The hook to support custom datatip in visualization components.
 */
function useDatatip({ content, placement = 'top-end-corner', offset, borderColor, anchor, touchResponse, isDisabled }) {
    const uniqueIdRef = hooks.useRef(useId.useId());
    const [coords, setCoords] = hooks.useState({ x: 0, y: 0 });
    const offsetValue = offset || { mainAxis: datatipUtils.DATATIP_OFFSET, crossAxis: -1 * datatipUtils.DATATIP_OFFSET };
    const [isVisible, setIsVisible] = hooks.useState(false);
    const targetRef = hooks.useRef(null);
    const toggleTimeoutRef = hooks.useRef();
    const onHover = (event) => {
        setCoords({ x: event.clientX, y: event.clientY });
        setIsVisible(true);
    };
    const onHoverEnter = (event, currentTarget) => {
        if (event.pointerType === 'touch' ||
            event.eventPhase === Event.AT_TARGET ||
            event.eventPhase === Event.BUBBLING_PHASE) {
            setCoords({ x: event.clientX, y: event.clientY });
            targetRef.current = currentTarget;
            setIsVisible(true);
        }
    };
    const onHoverLeave = () => {
        toggleTimeoutRef.current = setTimeout(() => {
            setIsVisible(false);
        }, 20);
    };
    const hoverHandlers = useVisHover.useVisHover(onHover, onHoverEnter, onHoverLeave, touchResponse);
    const onFocus = (event) => {
        if (event.eventPhase === Event.AT_TARGET || event.eventPhase === Event.BUBBLING_PHASE) {
            targetRef.current = event.target;
            setIsVisible(true);
        }
    };
    const onBlur = () => {
        setIsVisible(false);
    };
    const onContentPointerEnter = () => {
        clearTimeout(toggleTimeoutRef.current);
    };
    const onKeyUp = (event) => {
        if (event.code === 'ArrowUp' ||
            event.code === 'ArrowDown' ||
            event.code === 'ArrowRight' ||
            event.code === 'ArrowLeft' ||
            event.code === 'Tab') {
            setIsVisible(true);
        }
    };
    const onKeyDown = (event) => {
        if (event.code === 'Escape') {
            event.preventDefault();
            setIsVisible(false);
        }
    };
    const anchorRef = anchor === 'element' ? targetRef : { current: coords };
    const datatipContent = isVisible && !!content && !isDisabled ? (jsxRuntime.jsx(Layer.Layer, { children: jsxRuntime.jsx(Floating.Floating, { anchorRef: anchorRef, placement: placement, offsetValue: offsetValue, flipOptions: {
                crossAxis: anchor === 'pointer' ? true : false,
                mainAxis: anchor === 'pointer' ? true : false
            }, shiftOptions: { crossAxis: true, mainAxis: true }, children: jsxRuntime.jsx("div", { role: "tooltip", id: uniqueIdRef.current, className: hooks_PRIVATE_useDatatip_themes_useDatatip_css.styles.visDatatipStyle, style: { borderColor }, onPointerEnter: onContentPointerEnter, onPointerLeave: onHoverLeave, children: content }) }) })) : null;
    return {
        datatipContent,
        datatipProps: {
            'aria-describedby': datatipContent !== null ? uniqueIdRef.current : undefined,
            ...mergeProps.mergeProps(hoverHandlers, {
                onKeyUp,
                onKeyDown,
                onFocus,
                onBlur
            })
        }
    };
}

exports.useDatatip = useDatatip;
//# sourceMappingURL=useDatatip-14e6aeb0.js.map
