'use strict';

function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }

var React = require('react');
var React__default = _interopDefault(React);
var ReactDOM = _interopDefault(require('react-dom'));
var PropTypes = _interopDefault(require('prop-types'));
var __chunk_1 = require('../chunk-f817ce38.js');
var index$1$1 = require('../Text/index.js');
var __chunk_3 = require('../chunk-6d243953.js');
require('../chunk-2b268ae7.js');

var styles = (function (theme) {
  return {
    root: {
      // position: 'absolute',
      position: 'relative',
      left: 0,
      top: 0,
      display: 'inline-block'
    },
    label: {
      position: 'relative',
      padding: 8,
      borderRadius: '4px',
      boxShadow: '0 2px 6px 0 rgba(36, 47, 51, 0.16)',
      border: 'solid 1px ' + theme.palette.grey80,
      backgroundColor: theme.palette.white,
      maxWidth: 200,
      '&::before': {
        border: '10px solid transparent',
        content: '\'\'',
        display: 'block',
        position: 'absolute',
        width: 0
      },
      '&::after': {
        border: '10px solid transparent',
        content: '\'\'',
        display: 'block',
        position: 'absolute',
        width: 0
      }
    },
    left: {
      '&::before': {
        top: '10%',
        left: -10,
        borderLeft: 0,
        borderRight: '10px solid ' + theme.palette.grey80
      },
      '&::after': {
        top: '10%',
        left: -9,
        borderLeft: 0,
        borderRight: '10px solid ' + theme.palette.white
      }
    },
    bottom: {
      '&::before': {
        bottom: -10,
        left: '10%',
        borderBottom: 0,
        borderTop: '10px solid ' + theme.palette.grey80
      },
      '&::after': {
        bottom: -9,
        left: '10%',
        borderBottom: 0,
        borderTop: '10px solid ' + theme.palette.white
      }
    },
    top: {
      '&::before': {
        top: -10,
        left: '10%',
        borderTop: 0,
        borderBottom: '10px solid ' + theme.palette.grey80
      },
      '&::after': {
        top: -9,
        left: '10%',
        borderTop: 0,
        borderBottom: '10px solid ' + theme.palette.white
      }
    },
    right: {
      '&::before': {
        top: '10%',
        right: -10,
        borderRight: 0,
        borderLeft: '10px solid ' + theme.palette.grey80
      },
      '&::after': {
        top: '10%',
        right: -9,
        borderRight: 0,
        borderLeft: '10px solid ' + theme.palette.white
      }
    }
  };
});

var Tooltip = function (_React$Component) {
  __chunk_3.inherits(Tooltip, _React$Component);

  function Tooltip(props) {
    __chunk_3.classCallCheck(this, Tooltip);

    var _this = __chunk_3.possibleConstructorReturn(this, (Tooltip.__proto__ || Object.getPrototypeOf(Tooltip)).call(this, props));

    _this.componentDidMount = function () {
      var _this$props = _this.props,
          elementID = _this$props.elementID,
          position = _this$props.position;

      var element = document.getElementById(elementID);
      var height = _this.myInput.current ? _this.myInput.current.offsetHeight : 150;
      var width = _this.myInput.current ? _this.myInput.current.offsetWidth : 150;
      _this.setState({ height: height, width: width });
      if (element) {
        element.addEventListener('mouseenter', function (e) {
          var _this$getCoords = _this.getCoords(e.target),
              top = _this$getCoords.top,
              left = _this$getCoords.left;

          _this.setState(function (prev) {
            return __chunk_3._extends({
              visible: true
            }, _this.getTooltipPos(top, left, position, prev.height, prev.width, e.target.offsetHeight, e.target.offsetWidth));
          });
        });
        element.addEventListener('mouseleave', function () {
          return _this.setState({ visible: false });
        });
      }
    };

    _this.getTooltipPos = function (top, left, position, toolheight, toolwidth, elemheigth, elemWidth) {
      if (position === 'top') return { tooltipTop: top - toolheight - 10, tooltipLeft: left };
      if (position === 'bottom') return { tooltipTop: top + elemheigth + 10, tooltipLeft: left };
      if (position === 'right') return { tooltipTop: top, tooltipLeft: left + elemWidth + 10 };
      if (position === 'left') return { tooltipTop: top, tooltipLeft: left - toolwidth - 10 };
    };

    _this.getCoords = function (elem) {
      // crossbrowser version
      var box = elem.getBoundingClientRect();

      var _document = document,
          body = _document.body;

      var docEl = document.documentElement;

      var scrollTop = window.pageYOffset || docEl.scrollTop || body.scrollTop;
      var scrollLeft = window.pageXOffset || docEl.scrollLeft || body.scrollLeft;

      var clientTop = docEl.clientTop || body.clientTop || 0;
      var clientLeft = docEl.clientLeft || body.clientLeft || 0;

      var top = box.top + scrollTop - clientTop;
      var left = box.left + scrollLeft - clientLeft;

      return { top: Math.round(top), left: Math.round(left) };
    };

    _this.render = function () {
      var _this$props2 = _this.props,
          classes = _this$props2.classes,
          position = _this$props2.position,
          label = _this$props2.label;
      var _this$state = _this.state,
          tooltipTop = _this$state.tooltipTop,
          tooltipLeft = _this$state.tooltipLeft,
          visible = _this$state.visible;

      return ReactDOM.createPortal(React__default.createElement(
        'div',
        {
          id: 'tooltip',
          className: classes.root,
          style: {
            position: 'absolute',
            top: tooltipTop,
            left: tooltipLeft,
            zIndex: 100,
            visibility: visible ? '' : 'hidden'
          },
          ref: _this.myInput
        },
        React__default.createElement(
          'div',
          {
            className: __chunk_1.classNames(classes.label, position === 'left' && classes.right, position === 'right' && classes.left, position === 'top' && classes.bottom, position === 'bottom' && classes.top)
          },
          React__default.createElement(
            index$1$1,
            null,
            label
          )
        )
      ), _this.domBody);
    };

    _this.state = {
      visible: false,
      tooltipTop: 0,
      tooltipLeft: 0
    };
    _this.myInput = React__default.createRef();
    _this.domBody = document.body;
    return _this;
  }

  return Tooltip;
}(React__default.Component);

Tooltip.propTypes = {
  classes: PropTypes.object,
  position: PropTypes.oneOf(['top', 'bottom', 'left', 'right']),
  label: PropTypes.string,
  elementID: PropTypes.string
};

Tooltip.defaultProps = {
  position: 'left'
};

var Tooltip$1 = __chunk_1.withNano(styles)(Tooltip);

module.exports = Tooltip$1;
//# sourceMappingURL=index.js.map
