import { __rest } from '../../_virtual/_tslib.js';
import React__default, { useState } from 'react';
import { usePopper } from 'react-popper';
import Close from '../../icons/Close.js';
import { useDelayUnmount } from '../../hooks/useDelayUnmount.js';
import { Wrapper, PopoverContainer, TooltipTitle, CloseIconContainer } from './styles.js';
import { getId } from '../../utils/index.js';
import { IconButton } from '../IconButton/index.js';

function Tooltip(_a) {
    var { children, mode = 'AUTO', width, content, variant = 'definition', placement = 'top-start', title, xOffset = 0, yOffset = 4, nonStaticWidth = false } = _a, props = __rest(_a, ["children", "mode", "width", "content", "variant", "placement", "title", "xOffset", "yOffset", "nonStaticWidth"]);
    const [referenceElement, setReferenceElement] = useState(null);
    const [popperElement, setPopperElement] = useState(null);
    const [visible, setVisibility] = useState(false);
    const shouldRender = useDelayUnmount(visible, 350);
    const appendTestId = getId(props['data-testid']);
    const isNonStaticWidth = nonStaticWidth && variant === 'definition';
    const isManual = mode === 'MANUAL' && variant === 'definition';
    const placementVal = isNonStaticWidth && !['top', 'bottom'].includes(placement)
        ? 'top'
        : placement;
    const { styles, attributes } = usePopper(referenceElement, popperElement, {
        placement: placementVal,
        modifiers: [
            {
                name: 'offset',
                options: {
                    offset: [xOffset, yOffset],
                },
            },
        ],
    });
    const showTooltip = () => {
        setVisibility(true);
    };
    const hideTooltip = () => {
        setVisibility(false);
    };
    const modeEvents = () => {
        if (isManual) {
            return {
                onClick: showTooltip,
            };
        }
        else {
            return {
                onMouseEnter: showTooltip,
                onMouseLeave: hideTooltip,
            };
        }
    };
    return (React__default.createElement(Wrapper, null,
        React__default.createElement("span", Object.assign({ ref: setReferenceElement, onFocus: showTooltip, onBlur: hideTooltip }, modeEvents(), { tabIndex: 0 }), children),
        shouldRender && content && (React__default.createElement(PopoverContainer, Object.assign({ ref: setPopperElement, width: width, style: styles.popper, variant: variant, isVisible: visible, isManual: isManual, nonStaticWidth: isNonStaticWidth }, attributes.props, { "data-testid": props['data-testid'], "data-trackid": props['data-trackid'], "aria-label": props['aria-label'], "aria-checked": props['aria-checked'] }),
            variant === 'definition' && React__default.createElement(TooltipTitle, null, title),
            content,
            isManual && (React__default.createElement(CloseIconContainer, null,
                React__default.createElement(IconButton, { icon: React__default.createElement(Close, null), variant: "ghost", size: "x-small", "data-testid": appendTestId('close-icon'), onClick: hideTooltip })))))));
}

export { Tooltip };
