import React from 'react';
import 'react-dom';
import { c as _slicedToArray, a as _objectSpread2 } from '../_rollupPluginBabelHelpers-539c1155.js';
import PropTypes from 'prop-types';
import 'styled-components';
import '../index-930c2100.js';
import '../hooks/useActivify.js';
import Tooltip from './tooltip.js';
import '../key_codes-a5a2b85e.js';
import '../index-6b96e57a.js';
import '@styled-system/space';
import '@styled-system/color';
import '@styled-system/border';
import '@styled-system/variant';
import '@styled-system/typography';
import { s as styleInject } from '../style-inject.es-1f59c1d0.js';

var css = ".WithTooltip_withTooltip__3IdJV {\n  padding: 4px 8px;\n  font-size: 14px;\n  font-weight: 500;\n  -webkit-font-smoothing: antialiased;\n  min-width: 32px;\n  background-color: #28394B;\n  color: #F5F5F5;\n  text-align: left; }\n\n.WithTooltip_withTooltipTooltip__Y_dPz {\n  pointer-events: none; }\n";
var styles = {"withTooltip":"WithTooltip_withTooltip__3IdJV","withTooltipTooltip":"WithTooltip_withTooltipTooltip__Y_dPz"};
styleInject(css);

function WithTooltip(_ref) {
  var children = _ref.children,
      prefixClassName = _ref.prefixClassName,
      className = _ref.className,
      onClick = _ref.onClick,
      tooltip = _ref.tooltip,
      position = _ref.position,
      disabled = _ref.disabled;

  var _React$useState = React.useState(),
      _React$useState2 = _slicedToArray(_React$useState, 2),
      tooltipActive = _React$useState2[0],
      setTooltipActive = _React$useState2[1];

  var DOMRef = React.useRef();
  var timeout = React.useRef();
  var handleMouseEnter = React.useCallback(function () {
    timeout.current = setTimeout(function () {
      setTooltipActive(true);
    }, 300);
  });
  var handleMouseLeave = React.useCallback(function () {
    if (timeout.current) clearTimeout(timeout.current);
    setTooltipActive(false);
  });
  var defaultProps = {
    tooltipArrowColor: "rgba(0,0,0,0.7)",
    tooltipArrowSmall: true,
    className: styles.withTooltipTooltip,
    prefixClassName: "".concat(prefixClassName, "-inner")
  };
  var tooltipProps = {
    active: tooltipActive && !disabled,
    position: position,
    attachTo: DOMRef,
    onClose: handleMouseLeave
  };

  var withTooltipProps = _objectSpread2({}, tooltipProps, {}, defaultProps);

  var tooltipContentClassName = "".concat(styles.withTooltip, " ").concat(prefixClassName, "-inner-wrapper");
  return React.createElement("span", {
    ref: DOMRef,
    onMouseEnter: handleMouseEnter,
    onMouseLeave: handleMouseLeave,
    onClick: onClick,
    className: "".concat(styles.withTooltipWrapper, " ").concat(className, " ").concat(prefixClassName)
  }, children, tooltip && React.createElement(Tooltip, withTooltipProps, React.createElement("div", {
    className: tooltipContentClassName
  }, tooltip)));
}

WithTooltip.propTypes = {
  children: PropTypes.node,
  prefixClassName: PropTypes.string,
  className: PropTypes.string,
  tooltip: PropTypes.string,
  position: PropTypes.string,
  disabled: PropTypes.bool,
  onClick: PropTypes.func
};
WithTooltip.defaultProps = {
  children: null,
  className: "",
  tooltip: "",
  position: "TOP",
  disabled: false,
  onClick: function onClick() {}
};
WithTooltip.__docgenInfo = {
  "description": "",
  "methods": [],
  "displayName": "WithTooltip",
  "props": {
    "children": {
      "defaultValue": {
        "value": "null",
        "computed": false
      },
      "type": {
        "name": "node"
      },
      "required": false,
      "description": ""
    },
    "className": {
      "defaultValue": {
        "value": "\"\"",
        "computed": false
      },
      "type": {
        "name": "string"
      },
      "required": false,
      "description": ""
    },
    "tooltip": {
      "defaultValue": {
        "value": "\"\"",
        "computed": false
      },
      "type": {
        "name": "string"
      },
      "required": false,
      "description": ""
    },
    "position": {
      "defaultValue": {
        "value": "\"TOP\"",
        "computed": false
      },
      "type": {
        "name": "string"
      },
      "required": false,
      "description": ""
    },
    "disabled": {
      "defaultValue": {
        "value": "false",
        "computed": false
      },
      "type": {
        "name": "bool"
      },
      "required": false,
      "description": ""
    },
    "onClick": {
      "defaultValue": {
        "value": "() => {}",
        "computed": false
      },
      "type": {
        "name": "func"
      },
      "required": false,
      "description": ""
    },
    "prefixClassName": {
      "type": {
        "name": "string"
      },
      "required": false,
      "description": ""
    }
  }
};

export default WithTooltip;
