"use strict";

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));

var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));

var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));

var _getPrototypeOf3 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));

var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));

var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));

var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));

var _propTypes = _interopRequireDefault(require("prop-types"));

var React = _interopRequireWildcard(require("react"));

var _reactDom = _interopRequireDefault(require("react-dom"));

var _reactPopper = require("react-popper");

var _reactTransitionGroup = require("react-transition-group");

var _styledComponents = _interopRequireDefault(require("styled-components"));

var _interpolation = require("../../Tools/interpolation");

//  strict
var StyledTooltip =
/*#__PURE__*/
_styledComponents.default.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';
}, (0, _interpolation.theme)('tooltipColor'), (0, _interpolation.theme)('tooltipBorderColor'), (0, _interpolation.theme)('tooltipBackgroundColor'), (0, _interpolation.theme)('fontPrimary'), (0, _interpolation.fontSize)('sm'));

var Transition =
/*#__PURE__*/
_styledComponents.default.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"], (0, _interpolation.prop)('duration'), (0, _interpolation.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) {
  (0, _inherits2.default)(Tooltip, _React$Component);

  function Tooltip() {
    var _getPrototypeOf2;

    var _this;

    (0, _classCallCheck2.default)(this, Tooltip);

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

    _this = (0, _possibleConstructorReturn2.default)(this, (_getPrototypeOf2 = (0, _getPrototypeOf3.default)(Tooltip)).call.apply(_getPrototypeOf2, [this].concat(args)));
    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), "state", {
      active: false
    });
    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), "timeout", void 0);
    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), "container", void 0);
    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), "handleExited", function () {
      if (document.body && document.body.contains(_this.container)) {
        document.body.removeChild(_this.container);
      }
    });
    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), "handleMouseMove", function (event) {
      clearTimeout(_this.timeout);

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

        _this.setState({
          active: true
        });
      }
    });
    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), "handleMouseLeave", function (event) {
      _this.timeout = setTimeout(function () {
        if (_this.state.active) {
          _this.setState({
            active: false
          });
        }
      }, 50);
    });
    return _this;
  }

  (0, _createClass2.default)(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(_reactPopper.Manager, null, React.createElement(_reactPopper.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(_reactPopper.Popper, {
        placement: placement
      }, function (_ref6) {
        var ref = _ref6.ref,
            style = _ref6.style,
            placement = _ref6.placement;
        return React.createElement(_reactTransitionGroup.CSSTransition, {
          classNames: "fade",
          in: active,
          onExited: _this2.handleExited,
          timeout: duration,
          unmountOnExit: true
        }, React.createElement(React.Fragment, null, _this2.container && _reactDom.default.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);

(0, _defineProperty2.default)(Tooltip, "defaultProps", {
  duration: 150,
  placement: 'top'
});
Tooltip.propTypes = process.env.NODE_ENV !== "production" ? {
  children: _propTypes.default.node.isRequired,
  className: _propTypes.default.string,
  duration: _propTypes.default.number.isRequired,
  e2e: _propTypes.default.string,
  placement: _propTypes.default.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.default.func,
  text: _propTypes.default.string
} : {};
var _default = Tooltip;
exports.default = _default;