'use client';
import * as React from 'react';
import { useCallback, useState, useEffect, useRef } from 'react';
import { Tooltip } from '@fluentui/react-tooltip';
import { hasOverflow } from './overflow-utils';
import { getAccessibleDataObject } from './index';
import { Async } from './async-utils';
export const FocusableTooltipText = /*#__PURE__*/ React.forwardRef((props, forwardedRef)=>{
    const [textOverflow, setTextOverflow] = useState(false);
    const tooltipChild = useRef(null);
    const async = useRef(new Async()).current;
    const resizeObserver = useRef(undefined);
    const getTargetElement = useCallback(()=>{
        if (!tooltipChild.current || !tooltipChild.current.parentElement) {
            return undefined;
        }
        return tooltipChild.current.parentElement;
    }, [
        tooltipChild
    ]);
    const checkTextOverflow = useCallback(()=>{
        const overflowElement = getTargetElement();
        const isTextOverflow = !!overflowElement && hasOverflow(overflowElement);
        if (isTextOverflow !== textOverflow) {
            setTextOverflow(isTextOverflow);
        }
    }, [
        getTargetElement,
        textOverflow,
        setTextOverflow
    ]);
    useEffect(()=>{
        checkTextOverflow();
    }, [
        checkTextOverflow
    ]);
    useEffect(()=>{
        // setup part executed only when the component mounts/updates
        const overflowElement = getTargetElement();
        if (window.ResizeObserver && overflowElement) {
            resizeObserver.current = new window.ResizeObserver(async.debounce(checkTextOverflow, 500));
            resizeObserver.current.observe(overflowElement);
        }
        // cleanup part executed only when the component unmounts
        return ()=>{
            var _resizeObserver_current;
            (_resizeObserver_current = resizeObserver.current) === null || _resizeObserver_current === void 0 ? void 0 : _resizeObserver_current.disconnect();
            async.dispose();
        };
    }, [
        async,
        checkTextOverflow,
        getTargetElement
    ]);
    return /*#__PURE__*/ React.createElement("div", {
        className: props.className
    }, /*#__PURE__*/ React.createElement(Tooltip, {
        content: props.content,
        relationship: "description"
    }, /*#__PURE__*/ React.createElement("span", {
        ...getAccessibleDataObject(props.accessibilityData),
        ref: tooltipChild,
        "data-is-focusable": textOverflow
    }, props.content)));
});
