'use client'
import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
import { useState, useCallback, useEffect } from 'react';
import { createPortal } from 'react-dom';
import '@dynamic-labs/iconic';
import '@dynamic-labs/wallet-connector-core';
import { ReactComponent as SvgTooltipArrow } from '../../shared/assets/tooltip-arrow.js';
import '../../context/ViewContext/ViewContext.js';
import '../../shared/logger.js';
import '@dynamic-labs/wallet-book';
import { debounce } from '../../shared/utils/functions/debounce/debounce.js';
import '@dynamic-labs/utils';
import '../../utils/constants/colors.js';
import '../../utils/constants/values.js';
import '@dynamic-labs/sdk-api-core';
import { tooltipZIndex } from '../../shared/consts/index.js';
import { classNames } from '../../utils/functions/classNames/classNames.js';
import '../../events/dynamicEvents.js';
import '../../../../_virtual/_tslib.js';
import '../../context/DynamicContext/DynamicContext.js';
import '../../store/state/loadingAndLifecycle/loadingAndLifecycle.js';
import '../../store/state/authMode/authMode.js';
import '../../context/CaptchaContext/CaptchaContext.js';
import '../../context/ErrorContext/ErrorContext.js';
import '@dynamic-labs/multi-wallet';
import 'react-international-phone';
import '../../store/state/nonce/nonce.js';
import '@dynamic-labs-sdk/client/core';
import '../../client/client.js';
import '@dynamic-labs-sdk/client';
import '../../config/ApiEndpoint.js';
import '@dynamic-labs/locale';
import '../../store/state/dynamicContextProps/dynamicContextProps.js';
import '../../store/state/primaryWalletId/primaryWalletId.js';
import '../../store/state/connectedWalletsInfo/connectedWalletsInfo.js';
import '../../context/AccessDeniedContext/AccessDeniedContext.js';
import '../../context/AccountExistsContext/AccountExistsContext.js';
import '../../context/UserWalletsContext/UserWalletsContext.js';
import '../../context/VerificationContext/VerificationContext.js';
import { useElementById } from '../../utils/hooks/useElementById/useElementById.js';
import '../../utils/functions/compareChains/compareChains.js';
import '../../views/Passkey/utils/findPrimaryEmbeddedChain/findPrimaryEmbeddedChain.js';
import '../../context/ThemeContext/ThemeContext.js';
import '../../utils/hooks/useUserUpdateRequest/useUpdateUser/userFieldsSchema.js';
import 'bs58';
import '@dynamic-labs/types';
import '../../context/SocialRedirectContext/SocialRedirectContext.js';
import '../../context/LoadingContext/LoadingContext.js';
import '../../context/WalletContext/WalletContext.js';
import '../../utils/hooks/useEmbeddedWallet/useSecureEnclaveEmbeddedWallet/constants.js';
import 'yup';
import '../../context/MockContext/MockContext.js';
import '../../views/CollectUserDataView/useFields.js';
import '../../context/FieldsStateContext/FieldsStateContext.js';
import '../../context/UserFieldEditorContext/UserFieldEditorContext.js';
import '@dynamic-labs/rpc-providers';
import '../../store/state/walletOptions/walletOptions.js';
import 'react-i18next';
import '../Accordion/components/AccordionItem/AccordionItem.js';
import '../Alert/Alert.js';
import { useHover } from '../../utils/hooks/useHover/useHover.js';
import { ShadowDOM } from '../ShadowDOM/ShadowDOM.js';
import '../IconButton/IconButton.js';
import '../InlineWidget/InlineWidget.js';
import '../Input/Input.js';
import '../IsBrowser/IsBrowser.js';
import '../MenuList/Dropdown/Dropdown.js';
import '../OverlayCard/OverlayCard.js';
import '../Transition/ZoomTransition/ZoomTransition.js';
import '../Transition/SlideInUpTransition/SlideInUpTransition.js';
import '../Transition/OpacityTransition/OpacityTransition.js';
import '../PasskeyCreatedSuccessBanner/PasskeyCreatedSuccessBanner.js';
import '../Popper/Popper/Popper.js';
import '../Popper/PopperContext/PopperContext.js';
import 'react-focus-lock';
import 'qrcode';
import 'formik';
import '../../utils/hooks/useSubdomainCheck/useSubdomainCheck.js';
import '../../context/WalletGroupContext/WalletGroupContext.js';
import '../../context/IpConfigurationContext/IpConfigurationContext.js';
import '../../context/ConnectWithOtpContext/ConnectWithOtpContext.js';
import '../../widgets/DynamicBridgeWidget/views/WalletsView/components/SecondaryWallets/SecondaryWallets.js';
import '@hcaptcha/react-hcaptcha';
import '../../widgets/DynamicWidget/context/DynamicWidgetContext.js';
import '../../widgets/DynamicWidget/helpers/convertExchangeKeyAndProviderEnum.js';
import '../../views/ExchangeWhitelistWarning/ExchangeWhitelistWarning.js';
import '../../context/ErrorContext/hooks/useErrorText/useErrorText.js';
import '../../context/FooterAnimationContext/index.js';
import '../../views/MfaChooseDeviceView/useGetMfaOptions/useGetMfaOptions.js';
import '../../context/PasskeyContext/PasskeyContext.js';
import '../../context/OnrampContext/OnrampContext.js';
import '../../store/state/sendBalances.js';
import '../../store/state/connectorsInitializing/connectorsInitializing.js';
import '../OverlayCardBase/OverlayCardTarget/OverlayCardTarget.js';
import '../../widgets/DynamicWidget/components/DynamicWidgetHeader/DynamicWidgetHeader.js';
import '../../views/TransactionConfirmationView/TransactionConfirmationView.js';
import '../../widgets/DynamicWidget/components/PasskeyCard/PasskeyCard.js';
import '../../widgets/DynamicWidget/views/CryptoComOnramp/CryptoComOnramp.js';
import '../../../index.js';
import '../../widgets/DynamicWidget/views/ReceiveWalletFunds/ReceiveWalletFunds.js';
import '../../store/state/tokenBalances.js';
import '../../store/state/multichainBalances.js';
import '../../shared/utils/functions/getInitialUrl/getInitialUrl.js';

/** Map from useHover React handlers to JS ones */
const handlerMapping = {
    onMouseDown: 'mousedown',
    onMouseEnter: 'mouseenter',
    onMouseLeave: 'mouseleave',
    onMouseUp: 'mouseup',
};
/**
 * Sets up a Tooltip that appears on hover
 *
 * Note: Prefer to use targetRef instead of nesting children!
 * Children of Tooltip will eventually replace content.
 */
const Tooltip = ({ children, content, className, as: Tag = 'span', copykey, targetRef, }) => {
    const { createRootElement } = useElementById();
    const portalRoot = createRootElement('dynamic-tooltips');
    const [vector, setVector] = useState([0, 0]);
    const [visible, setVisible] = useState(false);
    /** If targetRef is not set, fall back to this ref */
    const [childrenWrapperRef, setChildrenWrapperRef] = useState(null);
    const effectiveRef = targetRef !== null && targetRef !== void 0 ? targetRef : childrenWrapperRef;
    /** Centers the tooltip to top-center of the target */
    const calcPosition = useCallback(() => {
        if (!effectiveRef)
            return;
        const childrenBounding = effectiveRef.getBoundingClientRect();
        setVector([
            childrenBounding.left + childrenBounding.width / 2,
            childrenBounding.top - 6, //add 6px margin over the children
        ]);
    }, [effectiveRef]);
    const [, childrenHoverHandlers] = useHover({
        falseOnClick: true,
        initialValue: false,
        onHover: () => {
            calcPosition();
            setVisible(true);
        },
        onHoverOff: () => {
            setVisible(false);
        },
    });
    // Updates top/left on initial render, and when window resizes
    useEffect(() => {
        calcPosition();
        const resizeListener = debounce(() => {
            calcPosition();
        }, 3);
        window.addEventListener('resize', resizeListener);
        return () => {
            window.removeEventListener('resize', resizeListener);
        };
    }, [calcPosition]);
    // Set handlers manually
    useEffect(() => {
        const element = effectiveRef;
        if (element) {
            for (const handler in childrenHoverHandlers) {
                element.addEventListener(handlerMapping[handler], childrenHoverHandlers[handler]);
            }
            return () => {
                for (const handler in childrenHoverHandlers) {
                    element.removeEventListener(handlerMapping[handler], childrenHoverHandlers[handler]);
                }
            };
        }
        return undefined;
    }, [effectiveRef, childrenHoverHandlers]);
    return (jsxs(Fragment, { children: [createPortal(jsx(ShadowDOM, { zIndex: tooltipZIndex, children: jsxs("div", { "data-testid": 'dynamicTooltip', className: classNames('dynamic-tooltip', {
                        'dynamic-tooltip--visible': visible,
                    }, className), style: { left: vector[0], top: vector[1] }, copykey: copykey, children: [content, jsx(SvgTooltipArrow, { className: 'dynamic-tooltip__arrow' })] }) }), portalRoot.current), targetRef === undefined && (jsx(Tag, { ref: setChildrenWrapperRef, children: children }))] }));
};

export { Tooltip };
