import './Tooltip_1ed9tky.css';
import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, extends as _extends, objectSpread2 as _objectSpread2 } from '../../../_virtual/_rollupPluginBabelHelpers.js';
import React__default, { forwardRef, useState, useRef } from 'react';
import cls from 'classnames';
import { useFloating, autoUpdate, shift, limitShift, flip, arrow, offset, useClick, useFocus, useDismiss, useRole, useHover, safePolygon, useInteractions, FloatingPortal, FloatingArrow } from '@floating-ui/react';
import { Slot } from '../../_Slot/Slot.js';
import { ARROW_PADDING, ARROW_HEIGHT, ARROW_WIDTH, ARROW_POLYGON } from '../Popover/Popover.js';
import { classes, tokens } from './Tooltip.tokens.js';
import { Wrapper, IconWrapper, base } from './Tooltip.styles.js';
import { getFloatingPortalProps } from '../Popover/utils/getFloatingPortalProps.js';

var _excluded = ["children", "target", "iconSlot", "trigger", "placement", "hasTail", "flip", "shift", "offset", "delayOpen", "delayClose", "zIndex", "className", "style", "size", "view", "portal"];
var tooltipRoot = function tooltipRoot(Root) {
  return /*#__PURE__*/forwardRef(function (_ref, outerRootRef) {
    var children = _ref.children,
      target = _ref.target,
      iconSlot = _ref.iconSlot,
      _ref$trigger = _ref.trigger,
      trigger = _ref$trigger === void 0 ? 'click' : _ref$trigger,
      _ref$placement = _ref.placement,
      placement = _ref$placement === void 0 ? 'bottom' : _ref$placement,
      _ref$hasTail = _ref.hasTail,
      hasTail = _ref$hasTail === void 0 ? true : _ref$hasTail,
      _ref$flip = _ref.flip,
      outsideFlip = _ref$flip === void 0 ? false : _ref$flip,
      _ref$shift = _ref.shift,
      outsideShift = _ref$shift === void 0 ? false : _ref$shift,
      _ref$offset = _ref.offset,
      outerOffset = _ref$offset === void 0 ? 0 : _ref$offset,
      _ref$delayOpen = _ref.delayOpen,
      delayOpen = _ref$delayOpen === void 0 ? 0 : _ref$delayOpen,
      _ref$delayClose = _ref.delayClose,
      delayClose = _ref$delayClose === void 0 ? 0 : _ref$delayClose,
      _ref$zIndex = _ref.zIndex,
      zIndex = _ref$zIndex === void 0 ? 1000 : _ref$zIndex,
      className = _ref.className,
      style = _ref.style,
      size = _ref.size,
      view = _ref.view,
      portal = _ref.portal,
      rest = _objectWithoutProperties(_ref, _excluded);
    var _useState = useState(false),
      _useState2 = _slicedToArray(_useState, 2),
      opened = _useState2[0],
      setOpened = _useState2[1];
    var arrowRef = useRef(null);
    var handleToggle = function handleToggle(opened) {
      setOpened(opened);
    };
    var _useFloating = useFloating({
        whileElementsMounted: autoUpdate,
        placement: placement,
        open: opened,
        onOpenChange: handleToggle,
        middleware: [outsideShift && shift({
          limiter: limitShift()
        }), outsideFlip && flip(), hasTail && arrow({
          element: arrowRef,
          padding: ARROW_PADDING
        }), offset((hasTail ? ARROW_HEIGHT : 0) + outerOffset)]
      }),
      refs = _useFloating.refs,
      floatingStyles = _useFloating.floatingStyles,
      context = _useFloating.context;
    var click = useClick(context, {
      enabled: trigger === 'click' || matchMedia('(hover: none)').matches
    });
    var focus = useFocus(context, {
      enabled: trigger === 'focus'
    });
    var dismiss = useDismiss(context, {
      enabled: true,
      outsidePress: true
    });
    var role = useRole(context);
    var hover = useHover(context, {
      mouseOnly: true,
      enabled: trigger === 'hover',
      handleClose: safePolygon({
        requireIntent: false
      }),
      delay: {
        open: delayOpen,
        close: delayClose
      }
    });
    var _useInteractions = useInteractions([dismiss, role, click, hover, focus]),
      getReferenceProps = _useInteractions.getReferenceProps,
      getFloatingProps = _useInteractions.getFloatingProps;
    return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Slot, _extends({
      ref: refs.setReference
    }, getReferenceProps()), target), opened && /*#__PURE__*/React__default.createElement(FloatingPortal, getFloatingPortalProps(portal), /*#__PURE__*/React__default.createElement(Root, _extends({
      ref: refs.setFloating,
      size: size,
      view: view,
      style: _objectSpread2(_objectSpread2({}, floatingStyles), {}, {
        zIndex: zIndex
      })
    }, getFloatingProps()), /*#__PURE__*/React__default.createElement(Wrapper, _extends({
      ref: outerRootRef,
      className: cls(className, classes.tooltipRoot),
      style: style,
      "data-tooltip-open": opened
    }, rest), iconSlot && /*#__PURE__*/React__default.createElement(IconWrapper, null, iconSlot), children, hasTail && /*#__PURE__*/React__default.createElement(FloatingArrow, {
      ref: arrowRef,
      context: context,
      width: ARROW_WIDTH,
      height: ARROW_HEIGHT,
      fill: "var(".concat(tokens.backgroundColor, ")"),
      d: ARROW_POLYGON
    })))));
  });
};
var tooltipConfig = {
  name: 'Tooltip',
  tag: 'div',
  layout: tooltipRoot,
  base: base,
  variations: {
    view: {
      css: "cvhemhj"
    },
    size: {
      css: "c16iadrc"
    }
  },
  defaults: {
    view: 'default',
    size: 'm'
  }
};

export { tooltipConfig, tooltipRoot };
