'use strict';

exports.__esModule = true;

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

var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);

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 _ = require('./..');

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

/**
 * @category communication
 * @component tooltip
 * @variations collab-ui-react
 */

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

  function Tooltip() {
    (0, _classCallCheck3.default)(this, Tooltip);
    return (0, _possibleConstructorReturn3.default)(this, _React$Component.apply(this, arguments));
  }

  Tooltip.prototype.render = function render() {
    var _props = this.props,
        tooltip = _props.tooltip,
        direction = _props.direction,
        tooltipTrigger = _props.tooltipTrigger,
        popupDelay = _props.popupDelay,
        popupCloseDelay = _props.popupCloseDelay,
        className = _props.className,
        children = _props.children,
        width = _props.width;

    var contentStyle = width ? { width: width } : {};
    var content = _react2.default.createElement(
      'span',
      { style: contentStyle, className: 'cui-tooltip__text' },
      tooltip
    );
    return _react2.default.createElement(
      _.Popover,
      {
        content: content,
        popoverTrigger: tooltipTrigger,
        direction: direction,
        className: 'cui-tooltip ' + className,
        popupDelay: popupDelay,
        popupCloseDelay: popupCloseDelay,
        showArrow: true
      },
      children
    );
  };

  return Tooltip;
}(_react2.default.Component);

Tooltip.displayName = 'Tooltip';


Tooltip.defaultProps = {
  children: null,
  className: '',
  popupDelay: null,
  popupCloseDelay: null,
  direction: 'top-center',
  tooltipTrigger: 'MouseEnter',
  tooltip: '',
  width: null
};

exports.default = Tooltip;

/**
* @name Tooltip Default
*
* @category communication
* @component tooltip
* @section default
*
* @js
*
* import {
*   Button
* } from '@collab-ui/react';
*
* export default function TooltipDefault() {
*   return (
*     <div className='row'>
*       <div>
*         <Tooltip
            tooltip='Hey There good buddy'
            direction='top-center'
            className="widthOverride"
            >
*           <Button
*             children='Hover Top'
*             ariaLabel='Hover Top'
*             color='primary'
*             onClick={() => { }}
*           />
*         </Tooltip>
*       </div>
*       <br />
*     </div>
*   );
* }
*
**/

/**
* @name Tooltip Bottom
*
* @category communication
* @component tooltip
* @section positional
*
* @js
*
* import {
*   Button
* } from '@collab-ui/react';
*
* export default function TooltipDefault() {
*   return (
*     <div className='row'>
*       <div>
*         <Tooltip
*           tooltip='Hey There good buddy'
*           direction='bottom-center'
*           tooltipTrigger='Focus'
*           popupDelay={500}
*           popupCloseDelay={100}
*         >
*           <Button
*             children='Focus Bottom'
*             ariaLabel='Focus Bottom'
*             color='primary'
*             onClick={() => { }}
*           />
*         </Tooltip>
*       </div>
*       <br />
*     </div>
*   );
* }
*
**/

/**
* @name Tooltip Click
*
* @category communication
* @component tooltip
* @section trigger
*
* @js
*
* import {
*   Button
* } from '@collab-ui/react';
*
* export default function TooltipDefault() {
*   return (
*     <div className='row'>
*       <div>
*         <Tooltip
*           tooltip='Hey There good buddy'
*           direction='right-center'
*           tooltipTrigger='Click'
*         >
*           <Button
*             children='Click to Trigger'
*             ariaLabel='Click to Trigger'
*             color='primary'
*             onClick={() => { }}
*           />
*         </Tooltip>
*       </div>
*       <br />
*     </div>
*   );
* }
*
**/

module.exports = exports['default'];