'use strict';

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

var _extends2 = require('babel-runtime/helpers/extends');

var _extends3 = _interopRequireDefault(_extends2);

var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties');

var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);

var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of');

var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);

var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');

var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);

var _createClass2 = require('babel-runtime/helpers/createClass');

var _createClass3 = _interopRequireDefault(_createClass2);

var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');

var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);

var _inherits2 = require('babel-runtime/helpers/inherits');

var _inherits3 = _interopRequireDefault(_inherits2);

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _propTypes = require('prop-types');

var _propTypes2 = _interopRequireDefault(_propTypes);

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

var _CalloutContainer = require('./styles/CalloutContainer');

var _CalloutContainer2 = _interopRequireDefault(_CalloutContainer);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

var Callout = function (_React$Component) {
  (0, _inherits3.default)(Callout, _React$Component);

  function Callout() {
    var _ref;

    var _temp, _this, _ret;

    (0, _classCallCheck3.default)(this, Callout);

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

    return _ret = (_temp = (_this = (0, _possibleConstructorReturn3.default)(this, (_ref = Callout.__proto__ || (0, _getPrototypeOf2.default)(Callout)).call.apply(_ref, [this].concat(args))), _this), _this.state = { show: false }, _this.trigger = function () {
      _this._timer = setTimeout(_this.show, _this.props.delay);
    }, _this.show = function () {
      _this.setState({ show: true });
    }, _this.cancel = function () {
      _this.setState({ show: false });
      clearTimeout(_this._timer);
    }, _this.renderReferenceContent = function (_ref2) {
      var ref = _ref2.ref;

      /* skip all props used by component and let outermost component to take an extra props */
      var _this$props = _this.props,
          delay = _this$props.delay,
          children = _this$props.children,
          content = _this$props.content,
          boundary = _this$props.boundary,
          maxWidth = _this$props.maxWidth,
          placement = _this$props.placement,
          extra = (0, _objectWithoutProperties3.default)(_this$props, ['delay', 'children', 'content', 'boundary', 'maxWidth', 'placement']);

      return _react2.default.createElement(
        'div',
        (0, _extends3.default)({
          style: { display: 'inline-block' },
          ref: ref,
          onMouseOver: _this.trigger,
          onMouseLeave: _this.cancel
        }, extra),
        _this.props.children
      );
    }, _this.renderPopperContent = function (_ref3) {
      var ref = _ref3.ref,
          style = _ref3.style,
          placement = _ref3.placement;
      return _react2.default.createElement(
        _CalloutContainer2.default,
        {
          innerRef: ref,
          style: style,
          'data-placement': placement,
          maxWidth: _this.props.maxWidth
        },
        _this.props.content
      );
    }, _this.getBoundariesElement = function () {
      return typeof _this.props.boundary === 'string' ? document.querySelector(_this.props.boundary) : _this.props.boundary;
    }, _temp), (0, _possibleConstructorReturn3.default)(_this, _ret);
  }

  (0, _createClass3.default)(Callout, [{
    key: 'render',
    value: function render() {
      var placement = this.props.placement;
      var show = this.state.show;


      return _react2.default.createElement(
        _reactPopper.Manager,
        null,
        _react2.default.createElement(
          _reactPopper.Reference,
          null,
          this.renderReferenceContent
        ),
        show && _react2.default.createElement(
          _reactPopper.Popper,
          {
            placement: placement,
            positionFixed: true,
            modifiers: {
              preventOverflow: {
                boundariesElement: this.getBoundariesElement() || window.document
              }
            }
          },
          this.renderPopperContent
        )
      );
    }
  }]);
  return Callout;
}(_react2.default.Component);

Callout.propTypes = {
  /**
   * Miliseconds to wait before showing the callout.
   */
  delay: _propTypes2.default.number,
  /**
   * Elements to render which will activate the callout on hover.
   */
  children: _propTypes2.default.node.isRequired,
  /**
   * Content to render inside the callout itself.
   */
  content: _propTypes2.default.node.isRequired,
  /**
   * Where to place the element. Use a value from react-popper
   */
  placement: _propTypes2.default.oneOf(['auto', 'top', 'top-start', 'top-end', 'right', 'right-start', 'right-end', 'bottom', 'bottom-start', 'bottom-end', 'left', 'left-start', 'left-end']),
  /**
   * Boundary for the callout; either a selector or a DOM element
   */
  boundary: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.object]),
  /**
   * Maximum width of the callout
   */
  maxWidth: _propTypes2.default.number
};
Callout.defaultProps = {
  delay: 100,
  placement: 'top',
  content: '',
  boundary: null,
  maxWidth: 300
};
exports.default = Callout;