'use strict';

exports.__esModule = true;

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

var _extends3 = _interopRequireDefault(_extends2);

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

var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);

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 popover
 * @variations collab-ui-react
 */

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

  function Popover() {
    var _temp, _this, _ret;

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

    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, _React$Component.call.apply(_React$Component, [this].concat(args))), _this), _this.state = {
      isOpen: false
    }, _this.delayedHide = function (e) {
      if (_this.showTimerId) {
        clearTimeout(_this.showTimerId);
        _this.showTimerId = null;
      }

      var delay = _this.props.hideDelay ? _this.props.hideDelay : _this.props.delay;

      _this.hideTimerId = setTimeout(function () {
        _this.hideTimerId = null;
        _this.setState({ isOpen: false });
      }, delay);

      e.stopPropagation();
    }, _this.delayedShow = function (e) {
      if (_this.hideTimerId) {
        clearTimeout(_this.hideTimerId);
        _this.hideTimerId = null;
      }

      var delay = _this.props.showDelay ? _this.props.showDelay : _this.props.delay;

      _this.showTimerId = setTimeout(function () {
        _this.showTimerId = null;
        _this.setState({ isOpen: true });
      }, delay);

      e.stopPropagation();
    }, _this.handleToggle = function () {
      _this.setState({
        isOpen: !_this.state.isOpen
      });
    }, _this.handleClose = function () {
      _this.setState({ isOpen: false });
    }, _this.handleMouseEnter = function (e) {
      return !_this.showTimerId && !_this.state.isOpen && _this.delayedShow(e);
    }, _this.handleMouseLeave = function (e) {
      if (_this.hasFocus) {
        return false;
      }

      return !_this.hideTimerId && _this.state.isOpen && _this.delayedHide(e);
    }, _this.handleBlur = function (e) {
      _this.hasFocus = false;

      _this.handleMouseLeave(e);
    }, _this.handleFocus = function (e) {
      _this.hasFocus = true;

      return !_this.showTimerId && !_this.state.isOpen && _this.delayedShow(e);
    }, _temp), (0, _possibleConstructorReturn3.default)(_this, _ret);
  }

  Popover.prototype.componentWillUnmount = function componentWillUnmount() {
    this.hideTimerId && clearTimeout(this.hideTimerId);
    this.showTimerId && clearTimeout(this.showTimerId);
  };

  Popover.prototype.render = function render() {
    var _this2 = this;

    var isOpen = this.state.isOpen;
    var _props = this.props,
        children = _props.children,
        popoverTrigger = _props.popoverTrigger,
        className = _props.className,
        showArrow = _props.showArrow,
        direction = _props.direction,
        content = _props.content,
        closeOnClick = _props.closeOnClick,
        props = (0, _objectWithoutProperties3.default)(_props, ['children', 'popoverTrigger', 'className', 'showArrow', 'direction', 'content', 'closeOnClick']);


    var getTriggers = function getTriggers() {
      var triggerProps = {};
      triggerProps.ref = function (ele) {
        return _this2.anchorRef = ele;
      };
      triggerProps.key = 'child-1';

      switch (popoverTrigger) {
        case 'MouseEnter':
          triggerProps.onMouseEnter = _this2.handleMouseEnter;
          triggerProps.onMouseLeave = _this2.handleMouseLeave;

          triggerProps.onFocus = _this2.handleFocus;
          triggerProps.onBlur = _this2.handleBlur;
          break;

        case 'Click':
          triggerProps.onClick = _this2.handleFocus;
          triggerProps.onFocus = _this2.handleFocus;
          triggerProps.onBlur = null;
          triggerProps.onMouseEnter = null;
          triggerProps.onMouseLeave = null;

          break;

        case 'Focus':
          triggerProps.onFocus = _this2.handleFocus;
          triggerProps.onBlur = null;
          triggerProps.onMouseEnter = null;
          triggerProps.onMouseLeave = null;

          break;
      }

      return triggerProps;
    };

    var anchorWithTriggers = children && _react2.default.cloneElement(children, getTriggers());

    return _react2.default.createElement(
      'div',
      null,
      anchorWithTriggers,
      _react2.default.createElement(
        _.EventOverlay,
        (0, _extends3.default)({
          ref: function ref(_ref) {
            return _this2.overlay = _ref;
          },
          allowClickAway: true,
          anchorNode: this.anchorRef,
          isOpen: isOpen,
          className: className,
          showArrow: showArrow,
          direction: direction,
          close: this.handleClose,
          closeOnClick: closeOnClick
        }, props),
        content
      )
    );
  };

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

Popover.displayName = 'Popover';


Popover.defaultProps = {
  className: '',
  direction: 'top-center',
  popoverTrigger: 'MouseEnter',
  showArrow: true,
  showDelay: 0,
  hideDelay: 0,
  delay: 0,
  closeOnClick: false
};

exports.default = Popover;

/**
* @name Popover Default with Delay
*
* @category communication
* @component popover
* @section default
*
* @js

 import {
  Button
} from '@collab-ui/react';

 export default function Default() {
 const content = (
      <span key="1" style={{ padding: '10px'}}>Popover bottom</span>
    );
  return(
    <div className='row'>
      <div>
        <Popover
          content={content}
          direction={'bottom-center'}
          delay={200}
          popoverTrigger={'MouseEnter'}
          targetOffset={{vertical: 10}}
          isDynamic
        >
          <Button
            children='Hover'
            ariaLabel='Hover'
            color='primary'
            onClick={()=>{}}
          />
        </Popover>
      </div>
      <br />
    </div>
  );
}
**/

/**
* @name Popover on Click
*
* @category communication
* @component popover
* @section onclick
*
* @js

 import {
  Button
} from '@collab-ui/react';

 export default function PopOverClick() {
 const content = (
      <span key="1" style={{ padding: '10px'}}>Popover top</span>
    );
  return(
    <div className='row'>
      <br />
      <div>
        <Popover
          content={content}
          direction={'top-center'}
          popoverTrigger={'Click'}
          targetOffset={{vertical: 10}}
        >
          <Button
            children='Click'
            ariaLabel='Click'
            color='primary'
            onClick={()=>{}}
          />
        </Popover>
      </div>
      <br />
    </div>
  );
}
**/

/**
* @name Popover on Focus
*
* @category communication
* @component popover
* @section onfocus
*
* @js

 import {
  Button
} from '@collab-ui/react';

 export default function PopOverFocus() {
  const contentLeft = (
    <span key="1" style={{ padding: '10px'}}>Popover left</span>
  );
  const contentRight = (
    <span key="1" style={{ padding: '10px'}}>Popover right</span>
  );
  return(
    <div className='row'>
      <br />
      <div>
        <Popover
          content={contentRight}
          direction={'right-center'}
          popoverTrigger={'Focus'}
          targetOffset={{horizontal: 10}}
        >
          <Button
            children='Focus Right'
            ariaLabel='Focus Right'
            color='primary'
            onClick={()=>{}}
          />
        </Popover>
      </div>
      <br />
      <div>
        <Popover
          content={contentLeft}
          direction={'left-center'}
          popoverTrigger={'Focus'}
          targetOffset={{horizontal: 10}}
        >
          <Button
            children='Focus Left'
            ariaLabel='Focus Left'
            color='primary'
            onClick={()=>{}}
          />
        </Popover>
      </div>
      <br />
    </div>
  );
}
**/

module.exports = exports['default'];