'use strict';

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

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _styledComponents = require('styled-components');

var _styledComponents2 = _interopRequireDefault(_styledComponents);

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

var _propTypes2 = _interopRequireDefault(_propTypes);

var _Text = require('../Text');

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

var TooltipWrapper = _styledComponents2.default.div.withConfig({
  displayName: 'template__TooltipWrapper'
})(['width:', ';display:inline-flex;position:relative;'], function (props) {
  return props.width === 'auto' ? 'auto' : '22px';
});
var TooltipIcon = _styledComponents2.default.div.withConfig({
  displayName: 'template__TooltipIcon'
})(['display:inline-flex;justify-content:center;align-items:center;width:16px;height:16px;font-size:12px;font-weight:300;> span{cursor:pointer;&:before{color:', ';}}'], function (props) {
  return props.displayed && props.theme['brand-primary'];
});
var TooltipLabel = (0, _styledComponents2.default)(_Text.Text).withConfig({
  displayName: 'template__TooltipLabel'
})(['font-size:13px;font-weight:300;']);
var TooltipBox = (0, _styledComponents2.default)(_Text.TextGroup).withConfig({
  displayName: 'template__TooltipBox'
})(['position:absolute;bottom:150%;left:', ';width:', ';display:', ';background-color:', ';color:', ';border:1px solid ', ';border-radius:5px;padding:10px 10px;box-sizing:border-box;cursor:pointer;font-size:11px;font-weight:300;font-family:"Montserrat",sans serif;text-align:left;> div,> span{margin-bottom:0;}&:before{content:\'\';display:block;position:absolute;left:114px;top:100%;width:0;height:0;z-index:0;border-left:9px solid transparent;border-right:9px solid transparent;border-top:8px solid ', ';}&:after{content:\'\';display:block;position:absolute;left:116px;top:100%;width:0;height:0;z-index:0;border-left:7px solid transparent;border-right:7px solid transparent;border-top:7px solid ', ';}'], function (props) {
  return props.left ? props.left : '-115px';
}, function (props) {
  return props.width === 'auto' || '250px';
}, function (props) {
  return props.displayed ? 'block' : 'none';
}, function (props) {
  return props.theme['white-blue'];
}, function (props) {
  return props.theme['gray-5'];
}, function (props) {
  return props.theme['gray-2'];
}, function (props) {
  return props.theme['gray-2'];
}, function (props) {
  return props.theme['white-blue'];
});

var Tooltip = exports.Tooltip = function Tooltip(props) {
  var icon = props.icon,
      width = props.width,
      left = props.left,
      label = props.label,
      displayed = props.displayed,
      handleClick = props.handleClick,
      handleMouseEnter = props.handleMouseEnter,
      handleMouseLeave = props.handleMouseLeave;

  return _react2.default.createElement(
    TooltipWrapper,
    { width: width },
    label ? _react2.default.createElement(
      TooltipLabel,
      { onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave },
      label
    ) : _react2.default.createElement(
      TooltipIcon,
      { displayed: displayed, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, onClick: handleClick },
      icon
    ),
    _react2.default.createElement(
      TooltipBox,
      { width: width, left: left, displayed: displayed, onClick: handleClick },
      props.children
    )
  );
};

Tooltip.propTypes = {
  icon: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.object]),
  width: _propTypes2.default.string,
  left: _propTypes2.default.string,
  label: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.object]),
  displayed: _propTypes2.default.bool,
  handleClick: _propTypes2.default.func,
  handleMouseEnter: _propTypes2.default.func,
  handleMouseLeave: _propTypes2.default.func
};

exports.default = Tooltip;