"use strict";

exports.__esModule = true;
exports.default = void 0;

var _react = _interopRequireDefault(require("react"));

var _propTypes = _interopRequireDefault(require("prop-types"));

var _ = require("./..");

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

function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }

function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; subClass.__proto__ = superClass; }

/**
 * @category communication
 * @component popover
 * @variations collab-ui-react
 */
var Popover =
/*#__PURE__*/
function (_React$Component) {
  _inheritsLoose(Popover, _React$Component);

  function Popover() {
    var _this;

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

    _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.handleClose = function () {
      _this.setState({
        isOpen: false
      });
    };

    _this.handleMouseEnter = function (e) {
      var children = _this.props.children;
      children.props.onMouseEnter && children.props.onMouseEnter(e);
      return !_this.showTimerId && !_this.state.isOpen && _this.delayedShow(e);
    };

    _this.handleMouseLeave = function (e) {
      var children = _this.props.children;

      if (_this.hasFocus) {
        return false;
      }

      children.props.onMouseLeave && children.props.onMouseLeave(e);
      return !_this.hideTimerId && _this.state.isOpen && _this.delayedHide(e);
    };

    _this.handleBlur = function (e) {
      var children = _this.props.children;
      _this.hasFocus = false;
      children.props.onBlur && children.props.onBlur(e);

      _this.handleMouseLeave(e);
    };

    _this.handleClick = function (e) {
      var children = _this.props.children;
      children.props.onClick && children.props.onClick(e);

      _this.handleFocus(e);
    };

    _this.handleFocus = function (e) {
      var children = _this.props.children;
      _this.hasFocus = true;
      children.props.onFocus && children.props.onFocus(e);
      return !_this.showTimerId && !_this.state.isOpen && _this.delayedShow(e);
    };

    return _this;
  }

  var _proto = Popover.prototype;

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

  _proto.render = function render() {
    var _this2 = this;

    var isOpen = this.state.isOpen;

    var _this$props = this.props,
        children = _this$props.children,
        popoverTrigger = _this$props.popoverTrigger,
        className = _this$props.className,
        showArrow = _this$props.showArrow,
        direction = _this$props.direction,
        content = _this$props.content,
        closeOnClick = _this$props.closeOnClick,
        props = _objectWithoutProperties(_this$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.handleClick;
          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 && _react.default.cloneElement(children, getTriggers());

    return _react.default.createElement("div", null, anchorWithTriggers, _react.default.createElement(_.EventOverlay, _extends({
      ref: function ref(_ref) {
        return _this2.overlay = _ref;
      },
      anchorNode: this.anchorRef,
      isOpen: isOpen,
      className: className,
      showArrow: showArrow,
      direction: direction,
      close: this.handleClose,
      closeOnClick: closeOnClick
    }, props), content));
  };

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

Popover.displayName = 'Popover';
Popover.defaultProps = {
  className: '',
  direction: 'top-center',
  popoverTrigger: 'MouseEnter',
  showArrow: true,
  showDelay: 0,
  hideDelay: 0,
  delay: 0,
  closeOnClick: false
};
Popover.propTypes = {
  /**
   * Event that will trigger popover appearance
   */
  popoverTrigger: _propTypes.default.oneOf(['MouseEnter', 'Click', 'Focus']),

  /**
   * optional direction of popover
   */
  direction: _propTypes.default.oneOf(['top-center', 'top-left', 'top-right', 'left-center', 'left-top', 'left-bottom', 'bottom-center', 'bottom-left', 'bottom-right', 'right-center', 'right-top', 'right-bottom']),

  /**
   * css class names which goes over popover container
   */
  className: _propTypes.default.string,

  /**
   * this should be the popover trigger(this should be a stateful component)
   */
  children: _propTypes.default.element.isRequired,

  /**
   * the content that goes into the popover
   */
  content: _propTypes.default.oneOfType([_propTypes.default.element, _propTypes.default.node]).isRequired,
  showArrow: _propTypes.default.bool,

  /**
   * the show delay for popover on hover and focus
   */
  showDelay: _propTypes.default.number,

  /**
   * the hide delay for popover on hover and focus
   */
  hideDelay: _propTypes.default.number,

  /**
   * the delay for popover on hover and focus (hide/show)
   */
  delay: _propTypes.default.number,

  /**
   * property which decides to close the popover on click of it
   */
  closeOnClick: _propTypes.default.bool
};
var _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>
  );
}
**/

exports.default = _default;