require('./Tooltip_1mkjdyq.css');
'use strict';

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

var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
var React = require('react');
var react = require('@linaria/react');
var index = require('../../utils/index.js');
var Tooltip_styles = require('./Tooltip.styles.js');
var base = require('./variations/_view/base.js');
var base$1 = require('./variations/_size/base.js');
var useDelayedTooltip = require('./hooks/useDelayedTooltip.js');
var common = require('../../engines/common.js');
var Popover$1 = require('../Popover/Popover.js');

function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }

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

var _excluded = ["id", "text", "opened", "isVisible", "isOpen", "hasArrow", "arrow", "animated", "offset", "minWidth", "maxWidth", "placement", "usePortal", "target", "children", "onDismiss", "view", "size", "contentLeft", "zIndex", "className", "style", "hoverTimeout", "mouseEnterDelay", "mouseLeaveDelay", "trigger"];
var ESCAPE_KEYCODE = 27;
var getStringValue = function getStringValue(value) {
  return typeof value === 'number' ? "".concat(value, "rem") : value;
};
var Popover = /*#__PURE__*/common.component(Popover$1.popoverConfig);
var _exp = function _exp() {
  return Popover;
};
var StyledPopover = /*#__PURE__*/react.styled(_exp())({
  name: "StyledPopover",
  "class": "swn233w",
  propsAsIs: true
});

/**
 * Компонент для текстовых подсказок. Основное предназначение — подписи к блокам.
 */

var tooltipRoot = function tooltipRoot(Root) {
  return /*#__PURE__*/React.forwardRef(function (_ref, outerRef) {
    var _ref2, _mouseLeaveDelay;
    var id = _ref.id,
      text = _ref.text,
      opened = _ref.opened,
      isVisible = _ref.isVisible,
      isOpen = _ref.isOpen,
      _ref$hasArrow = _ref.hasArrow,
      hasArrow = _ref$hasArrow === void 0 ? true : _ref$hasArrow,
      arrow = _ref.arrow,
      animated = _ref.animated,
      _ref$offset = _ref.offset,
      offset = _ref$offset === void 0 ? [3, 8] : _ref$offset,
      minWidth = _ref.minWidth,
      maxWidth = _ref.maxWidth,
      _ref$placement = _ref.placement,
      placement = _ref$placement === void 0 ? 'bottom' : _ref$placement,
      _ref$usePortal = _ref.usePortal,
      usePortal = _ref$usePortal === void 0 ? true : _ref$usePortal,
      target = _ref.target,
      children = _ref.children,
      onDismiss = _ref.onDismiss,
      view = _ref.view,
      size = _ref.size,
      contentLeft = _ref.contentLeft,
      _ref$zIndex = _ref.zIndex,
      zIndex = _ref$zIndex === void 0 ? '9200' : _ref$zIndex,
      className = _ref.className,
      style = _ref.style,
      hoverTimeout = _ref.hoverTimeout,
      _ref$mouseEnterDelay = _ref.mouseEnterDelay,
      mouseEnterDelay = _ref$mouseEnterDelay === void 0 ? 0 : _ref$mouseEnterDelay,
      mouseLeaveDelay = _ref.mouseLeaveDelay,
      trigger = _ref.trigger,
      rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
    var _useState = React.useState(null),
      _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
      ref = _useState2[0],
      setRef = _useState2[1];
    mouseLeaveDelay = (_ref2 = (_mouseLeaveDelay = mouseLeaveDelay) !== null && _mouseLeaveDelay !== void 0 ? _mouseLeaveDelay : hoverTimeout) !== null && _ref2 !== void 0 ? _ref2 : 300;
    var _useDelayedTooltip = useDelayedTooltip.useDelayedTooltip(mouseEnterDelay, mouseLeaveDelay),
      openedState = _useDelayedTooltip.opened,
      showTooltip = _useDelayedTooltip.showTooltip,
      hideTooltip = _useDelayedTooltip.hideTooltip,
      setOpened = _useDelayedTooltip.setOpened;
    var isTooltipOpened = Boolean(text) && (isVisible || isOpen || opened || openedState);
    React.useEffect(function () {
      var onKeyDown = function onKeyDown(event) {
        if (event.keyCode === ESCAPE_KEYCODE) {
          onDismiss === null || onDismiss === void 0 || onDismiss();
        }
      };
      window.addEventListener('keydown', onKeyDown);
      return function () {
        window.removeEventListener('keydown', onKeyDown);
      };
    }, []);
    var onToggle = function onToggle(isOpen) {
      if (trigger === 'hover') {
        if (isOpen) {
          showTooltip();
        } else {
          hideTooltip();
        }
      } else {
        setOpened(isOpen);
      }
    };
    return /*#__PURE__*/React__default.default.createElement(StyledPopover, _rollupPluginBabelHelpers.extends({
      opened: isTooltipOpened,
      placement: placement,
      offset: offset,
      zIndex: zIndex,
      target: target || children,
      usePortal: usePortal,
      hasArrow: arrow || hasArrow,
      "aria-hidden": !isTooltipOpened,
      "aria-live": "polite",
      role: "tooltip",
      animated: animated,
      className: index.cx(ref === null || ref === void 0 ? void 0 : ref.classList.toString())
    }, (trigger === 'hover' || trigger === 'click') && {
      trigger: trigger,
      onToggle: onToggle
    }, rest), /*#__PURE__*/React__default.default.createElement(Root, {
      view: view,
      size: size,
      ref: setRef,
      className: className,
      style: style
    }, /*#__PURE__*/React__default.default.createElement(Tooltip_styles.TooltipRoot, {
      ref: outerRef,
      id: id,
      maxWidth: getStringValue(maxWidth),
      minWidth: getStringValue(minWidth)
    }, contentLeft && /*#__PURE__*/React__default.default.createElement(Tooltip_styles.StyledContentLeft, null, contentLeft), text)));
  });
};
var tooltipConfig = {
  name: 'Tooltip',
  tag: 'div',
  layout: tooltipRoot,
  base: '',
  variations: {
    view: {
      css: base.base
    },
    size: {
      css: base$1.base
    }
  },
  defaults: {
    view: 'default',
    size: 'm'
  }
};

exports.tooltipConfig = tooltipConfig;
exports.tooltipRoot = tooltipRoot;
