import _defineProperty from "@babel/runtime/helpers/defineProperty";
import React, { PureComponent, useEffect, useState } from 'react';
import ReactDOM from 'react-dom';
import ReactEditorViewContext from './ReactEditorViewContext';

// This needs exporting to be used alongisde `withReactEditorViewOuterListeners`

class WithOutsideClick extends PureComponent {
  constructor(...args) {
    super(...args);
    _defineProperty(this, "handleClick", evt => {
      if (!this.props.isActiveComponent) {
        return;
      }
      const domNode = ReactDOM.findDOMNode(this); // eslint-disable-line react/no-find-dom-node
      if (!domNode || evt.target instanceof Node && !domNode.contains(evt.target)) {
        if (this.props.handleClickOutside) {
          var _this$props$editorVie;
          this.props.handleClickOutside(evt);
          // When the menus are closed by clicking outside the focus is set on editor.
          if (!((_this$props$editorVie = this.props.editorView) !== null && _this$props$editorVie !== void 0 && _this$props$editorVie.hasFocus())) {
            var _this$props$editorVie2;
            (_this$props$editorVie2 = this.props.editorView) === null || _this$props$editorVie2 === void 0 ? void 0 : _this$props$editorVie2.focus();
          }
        }
      }
    });
    _defineProperty(this, "handleKeydown", evt => {
      if (!this.props.isActiveComponent) {
        return;
      }
      if (evt.code === 'Escape' && this.props.handleEscapeKeydown) {
        evt.preventDefault();
        evt.stopPropagation();
        this.props.handleEscapeKeydown(evt);
        // on 'Esc', Focus is handled in 'handleEscapeKeydown'.
        return false;
      } else if (evt.code === 'Enter' && this.props.handleEnterKeydown) {
        this.props.handleEnterKeydown(evt);
      } else if (evt.code === 'Tab' && this.props.handleEscapeKeydown && this.props.closeOnTab) {
        // The menus should be closed when the tab is pressed as it takes the focus out of the menu
        this.props.handleEscapeKeydown(evt);
      }
    });
  }
  componentDidMount() {
    if (this.props.handleClickOutside) {
      document.addEventListener('click', this.handleClick, false);
    }
    if (this.props.handleEscapeKeydown) {
      var _this$props$editorRef;
      // Attached event to the menu so that 'ESC' events from the opened menu also will be handled.
      (((_this$props$editorRef = this.props.editorRef) === null || _this$props$editorRef === void 0 ? void 0 : _this$props$editorRef.current) || this.props.targetRef || document).addEventListener('keydown', this.handleKeydown, false);
    }
  }
  componentWillUnmount() {
    if (this.props.handleClickOutside) {
      document.removeEventListener('click', this.handleClick, false);
    }
    if (this.props.handleEscapeKeydown) {
      var _this$props$editorRef2;
      (((_this$props$editorRef2 = this.props.editorRef) === null || _this$props$editorRef2 === void 0 ? void 0 : _this$props$editorRef2.current) || this.props.targetRef || document).removeEventListener('keydown', this.handleKeydown, false);
    }
  }
  render() {
    return this.props.children;
  }
}
function hasIsOpen(props) {
  return 'isOpen' in props;
}
export default function withReactEditorViewOuterListeners(Component) {
  return ({
    handleClickOutside,
    handleEnterKeydown,
    handleEscapeKeydown,
    closeOnTab,
    ...props
  }) => {
    const isActiveProp = hasIsOpen(props) ? props.isOpen : true;
    const [isActiveComponent, setActiveComponent] = useState(false);
    useEffect(() => {
      requestAnimationFrame(() => {
        setActiveComponent(isActiveProp);
      });
    }, [isActiveProp]);
    return /*#__PURE__*/React.createElement(ReactEditorViewContext.Consumer, null, ({
      editorView,
      editorRef
    }) => /*#__PURE__*/React.createElement(WithOutsideClick, {
      editorView: editorView,
      editorRef: editorRef,
      targetRef: props.targetRef,
      isActiveComponent: isActiveComponent,
      handleClickOutside: handleClickOutside,
      handleEnterKeydown: handleEnterKeydown,
      handleEscapeKeydown: handleEscapeKeydown,
      closeOnTab: closeOnTab
    }, /*#__PURE__*/React.createElement(Component, props)));
  };
}