'use client';
import * as React from 'react';
import { useState, useRef, useEffect, useCallback } from 'react';
import { usePortalMountNode } from '@fluentui/react-shared-contexts';
import { Tooltip } from '@fluentui/react-tooltip';
import { Async } from './async-utils';
import { KeyCodes } from './KeyCodes';
import { useId } from '@fluentui/react-utilities';
export const SVGTooltipText = /*#__PURE__*/ React.forwardRef(({ delay = 0, showBackground = false, ...restProps }, forwardedRef)=>{
    var _props_textProps, _props_textProps1, _props_textProps2;
    const props = {
        delay,
        showBackground,
        ...restProps
    };
    const [isTooltipVisible, setIsTooltipVisible] = useState(false);
    const [isOverflowing, setIsOverflowing] = useState(false);
    const [textWidth, setTextWidth] = useState(0);
    const [textHeight, setTextHeight] = useState(0);
    const tooltipHostRef = useRef(null);
    const async = useRef(new Async()).current;
    const dismissTimerId = useRef(undefined);
    const openTimerId = useRef(undefined);
    const tooltipHostId = useRef(useId('tooltip-host')).current;
    const ignoreNextFocusEvent = useRef(false);
    const portalMountNode = usePortalMountNode();
    const PADDING = 3;
    const wrapContentCallback = useCallback(()=>{
        var _props_maxWidth;
        if (props.content && props.wrapContent && props.wrapContent(props.content, tooltipHostId, (_props_maxWidth = props.maxWidth) !== null && _props_maxWidth !== void 0 ? _props_maxWidth : 100, props.maxHeight)) {
            setIsOverflowing(true);
        } else {
            setIsOverflowing(false);
        }
    }, [
        props,
        tooltipHostId
    ]);
    const measureText = useCallback(()=>{
        if (tooltipHostRef.current && typeof tooltipHostRef.current.getBBox === 'function') {
            const bbox = tooltipHostRef.current.getBBox();
            setTextWidth(bbox.width);
            setTextHeight(bbox.height);
        }
    }, []);
    useEffect(()=>{
        wrapContentCallback();
        return ()=>{
            async.dispose();
        };
    }, [
        wrapContentCallback,
        async
    ]);
    useEffect(()=>{
        wrapContentCallback();
    }, [
        props.maxWidth,
        props.maxHeight,
        wrapContentCallback
    ]);
    useEffect(()=>{
        if (isTooltipVisible) {
            measureText();
        }
    }, [
        isTooltipVisible,
        measureText
    ]);
    useEffect(()=>{
        // Recalculate text dimensions when content or dimensions change
        measureText();
    }, [
        props.content,
        props.textProps,
        props.maxWidth,
        props.maxHeight,
        measureText
    ]);
    const hideTooltip = useCallback(()=>{
        async.clearTimeout(openTimerId.current);
        async.clearTimeout(dismissTimerId.current);
        setIsTooltipVisible(false);
    }, [
        async
    ]);
    const onTooltipMouseEnter = useCallback((ev)=>{
        if (!isOverflowing) {
            return;
        }
        if (ev.target && (portalMountNode === null || portalMountNode === void 0 ? void 0 : portalMountNode.contains(ev.target))) {
            return;
        }
        async.clearTimeout(dismissTimerId.current);
        async.clearTimeout(openTimerId.current);
        if (props.delay !== 0) {
            openTimerId.current = async.setTimeout(()=>{
                setIsTooltipVisible(true);
            }, props.delay);
        } else {
            setIsTooltipVisible(true);
        }
    }, [
        isOverflowing,
        portalMountNode,
        async,
        props.delay
    ]);
    const onTooltipMouseLeave = useCallback((ev)=>{
        async.clearTimeout(dismissTimerId.current);
        async.clearTimeout(openTimerId.current);
        if (props.closeDelay) {
            dismissTimerId.current = async.setTimeout(()=>{
                setIsTooltipVisible(false);
            }, props.closeDelay);
        } else {
            setIsTooltipVisible(false);
        }
    }, [
        async,
        props.closeDelay
    ]);
    const onTooltipFocus = useCallback((ev)=>{
        if (ignoreNextFocusEvent.current) {
            ignoreNextFocusEvent.current = false;
            return;
        }
        onTooltipMouseEnter(ev);
    }, [
        onTooltipMouseEnter
    ]);
    const onTooltipBlur = useCallback((ev)=>{
        var _document;
        ignoreNextFocusEvent.current = ((_document = document) === null || _document === void 0 ? void 0 : _document.activeElement) === ev.target;
        dismissTimerId.current = async.setTimeout(()=>{
            setIsTooltipVisible(false);
        }, 0);
    }, [
        async
    ]);
    const onTooltipKeyDown = useCallback((ev)=>{
        // eslint-disable-next-line @typescript-eslint/no-deprecated
        if ((ev.which === KeyCodes.escape || ev.ctrlKey) && isTooltipVisible) {
            hideTooltip();
            ev.stopPropagation();
        }
    }, [
        isTooltipVisible,
        hideTooltip
    ]);
    const showTooltip = props.isTooltipVisibleProp && isOverflowing && !!props.content || isTooltipVisible && !!props.content;
    const rectX = (typeof ((_props_textProps = props.textProps) === null || _props_textProps === void 0 ? void 0 : _props_textProps.x) === 'number' ? props.textProps.x : 0) - (textWidth !== null && textWidth !== void 0 ? textWidth : 0) / 2 - PADDING;
    const rectY = (typeof ((_props_textProps1 = props.textProps) === null || _props_textProps1 === void 0 ? void 0 : _props_textProps1.y) === 'number' ? props.textProps.y : 0) - (textHeight !== null && textHeight !== void 0 ? textHeight : 0) / 2 - 2 * PADDING;
    return /*#__PURE__*/ React.createElement(React.Fragment, null, props.showBackground && /*#__PURE__*/ React.createElement("rect", {
        x: rectX,
        y: rectY,
        width: (textWidth !== null && textWidth !== void 0 ? textWidth : 0) + 2 * PADDING,
        height: (textHeight !== null && textHeight !== void 0 ? textHeight : 0) + PADDING,
        transform: (_props_textProps2 = props.textProps) === null || _props_textProps2 === void 0 ? void 0 : _props_textProps2.transform,
        className: props.className
    }), /*#__PURE__*/ React.createElement(Tooltip, {
        relationship: "description",
        ...props.tooltipProps,
        withArrow: true,
        content: props.content,
        // targetElement={getTargetElement()} ToDo - This assignment is causing build failure. Needs to be fixed.
        visible: showTooltip
    }, /*#__PURE__*/ React.createElement("text", {
        ...props.textProps,
        id: tooltipHostId,
        ref: tooltipHostRef,
        onFocusCapture: onTooltipFocus,
        onBlurCapture: onTooltipBlur,
        onMouseEnter: onTooltipMouseEnter,
        onMouseLeave: onTooltipMouseLeave,
        onKeyDown: onTooltipKeyDown,
        "data-is-focusable": props.shouldReceiveFocus && isOverflowing
    }, props.content)));
});
