import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
import _createClass from "@babel/runtime/helpers/esm/createClass";
import _possibleConstructorReturn from "@babel/runtime/helpers/esm/possibleConstructorReturn";
import _getPrototypeOf from "@babel/runtime/helpers/esm/getPrototypeOf";
import _inherits from "@babel/runtime/helpers/esm/inherits";
import _assertThisInitialized from "@babel/runtime/helpers/esm/assertThisInitialized";
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
import PropTypes from 'prop-types';
import * as React from 'react';
import ReactDOM from 'react-dom';
import { Manager, Reference, Popper } from 'react-popper';
import { CSSTransition } from 'react-transition-group';
import styled from 'styled-components';
import { fontSize, prop, theme } from '../../Tools/interpolation';
var StyledTooltip =
/*#__PURE__*/
styled.div.withConfig({
  componentId: "sc-1swud5y-0"
})(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  min-height: 2rem;\n  line-height: 2rem;\n  padding: 0 0.5rem;\n  margin-top: ", ";\n  margin-bottom: ", ";\n  margin-left: ", ";\n  margin-right: ", ";\n  color: ", ";\n  border: 1px solid ", ";\n  background-color: ", ";\n  font-family: ", ";\n  font-size: ", ";\n  font-weight: 500;\n  border-radius: 0.25rem;\n"], function (_ref) {
  var marginPlacement = _ref.marginPlacement;
  return marginPlacement === 'bottom' ? '0.25rem' : '0';
}, function (_ref2) {
  var marginPlacement = _ref2.marginPlacement;
  return marginPlacement === 'top' ? '0.25rem' : '0';
}, function (_ref3) {
  var marginPlacement = _ref3.marginPlacement;
  return marginPlacement === 'right' ? '0.25rem' : '0';
}, function (_ref4) {
  var marginPlacement = _ref4.marginPlacement;
  return marginPlacement === 'left' ? '0.25rem' : '0';
}, theme('tooltipColor'), theme('tooltipBorderColor'), theme('tooltipBackgroundColor'), theme('fontPrimary'), fontSize('sm'));
var Transition =
/*#__PURE__*/
styled.div.withConfig({
  componentId: "sc-1swud5y-1"
})(["\n  opacity: 1;\n\n  &.fade-enter {\n    opacity: 0.01;\n  }\n\n  &.fade-enter-active {\n    opacity: 1;\n    transition: opacity ", "ms ease-out;\n  }\n\n  &.fade-exit {\n    opacity: 1;\n  }\n\n  &.fade-exit-active {\n    opacity: 0.01;\n    transition: opacity ", "ms ease-out;\n  }\n"], prop('duration'), prop('duration'));

var computeMarginPlacement = function computeMarginPlacement() {
  var placement = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'top';
  return placement.split('-')[0];
};

var Tooltip =
/*#__PURE__*/
function (_React$Component) {
  _inherits(Tooltip, _React$Component);

  function Tooltip() {
    var _getPrototypeOf2;

    var _this;

    _classCallCheck(this, Tooltip);

    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }

    _this = _possibleConstructorReturn(this, (_getPrototypeOf2 = _getPrototypeOf(Tooltip)).call.apply(_getPrototypeOf2, [this].concat(args)));

    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "state", {
      active: false
    });

    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "timeout", void 0);

    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "container", void 0);

    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "handleExited", function () {
      if (document.body && document.body.contains(_this.container)) {
        document.body.removeChild(_this.container);
      }
    });

    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "handleMouseMove", function (event) {
      clearTimeout(_this.timeout);

      if (!_this.state.active) {
        if (document.body != null) {
          document.body.appendChild(_this.container);
        }

        _this.setState({
          active: true
        });
      }
    });

    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "handleMouseLeave", function (event) {
      _this.timeout = setTimeout(function () {
        if (_this.state.active) {
          _this.setState({
            active: false
          });
        }
      }, 50);
    });

    return _this;
  }

  _createClass(Tooltip, [{
    key: "componentDidMount",
    value: function componentDidMount() {
      this.container = document.createElement('div');
    }
  }, {
    key: "componentWillUnmount",
    value: function componentWillUnmount() {
      clearTimeout(this.timeout);
      this.setState({
        active: false
      });

      if (document.body && document.body.contains(this.container)) {
        document.body.removeChild(this.container);
        delete this.container;
      }
    }
  }, {
    key: "render",
    value: function render() {
      var _this2 = this;

      var _this$props = this.props,
          children = _this$props.children,
          className = _this$props.className,
          duration = _this$props.duration,
          e2e = _this$props.e2e,
          placement = _this$props.placement,
          renderTrigger = _this$props.renderTrigger,
          text = _this$props.text;
      var active = this.state.active;
      var marginPlacement = computeMarginPlacement(placement);
      return React.createElement(Manager, null, React.createElement(Reference, null, function (_ref5) {
        var ref = _ref5.ref;
        return React.createElement("div", {
          onMouseLeave: _this2.handleMouseLeave,
          onMouseMove: _this2.handleMouseMove,
          ref: ref
        }, renderTrigger && renderTrigger(active, e2e), !renderTrigger && text);
      }), React.createElement(Popper, {
        placement: placement
      }, function (_ref6) {
        var ref = _ref6.ref,
            style = _ref6.style,
            placement = _ref6.placement;
        return React.createElement(CSSTransition, {
          classNames: "fade",
          in: active,
          onExited: _this2.handleExited,
          timeout: duration,
          unmountOnExit: true
        }, React.createElement(React.Fragment, null, _this2.container && ReactDOM.createPortal(React.createElement(Transition, {
          duration: duration,
          onMouseLeave: _this2.handleMouseLeave,
          onMouseMove: _this2.handleMouseMove,
          ref: ref,
          style: style
        }, React.createElement(StyledTooltip, {
          className: className || '',
          marginPlacement: marginPlacement
        }, children)), _this2.container)));
      }));
    }
  }]);

  return Tooltip;
}(React.Component);

_defineProperty(Tooltip, "defaultProps", {
  duration: 150,
  placement: 'top'
});

Tooltip.propTypes = process.env.NODE_ENV !== "production" ? {
  children: PropTypes.node.isRequired,
  className: PropTypes.string,
  duration: PropTypes.number.isRequired,
  e2e: PropTypes.string,
  placement: PropTypes.oneOf(['auto-start', 'auto', 'auto-end', 'top-start', 'top', 'top-end', 'right-start', 'right', 'right-end', 'bottom-end', 'bottom', 'bottom-start', 'left-end', 'left', 'left-start']),
  renderTrigger: PropTypes.func,
  text: PropTypes.string
} : {};
export default Tooltip;