'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var _tslib = require('../../_virtual/_tslib.js');
var React = require('react');
var reactPopper = require('react-popper');
var Close = require('../../icons/Close.js');
var useDelayUnmount = require('../../hooks/useDelayUnmount.js');
var styles = require('./styles.js');
var index = require('../../utils/index.js');
var index$1 = require('../IconButton/index.js');

function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

var React__default = /*#__PURE__*/_interopDefaultLegacy(React);

function Tooltip(_a) {
    var { children, mode = 'AUTO', width, content, variant = 'definition', placement = 'top-start', title, xOffset = 0, yOffset = 4, nonStaticWidth = false } = _a, props = _tslib.__rest(_a, ["children", "mode", "width", "content", "variant", "placement", "title", "xOffset", "yOffset", "nonStaticWidth"]);
    const [referenceElement, setReferenceElement] = React.useState(null);
    const [popperElement, setPopperElement] = React.useState(null);
    const [visible, setVisibility] = React.useState(false);
    const shouldRender = useDelayUnmount.useDelayUnmount(visible, 350);
    const appendTestId = index.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: styles$1, attributes } = reactPopper.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['default'].createElement(styles.Wrapper, null,
        React__default['default'].createElement("span", Object.assign({ ref: setReferenceElement, onFocus: showTooltip, onBlur: hideTooltip }, modeEvents(), { tabIndex: 0 }), children),
        shouldRender && content && (React__default['default'].createElement(styles.PopoverContainer, Object.assign({ ref: setPopperElement, width: width, style: styles$1.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['default'].createElement(styles.TooltipTitle, null, title),
            content,
            isManual && (React__default['default'].createElement(styles.CloseIconContainer, null,
                React__default['default'].createElement(index$1.IconButton, { icon: React__default['default'].createElement(Close['default'], null), variant: "ghost", size: "x-small", "data-testid": appendTestId('close-icon'), onClick: hideTooltip })))))));
}

exports.Tooltip = Tooltip;
