"use strict";

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

const tslib_1 = require("tslib");

const react_1 = tslib_1.__importDefault(require("react"));

const classnames_1 = tslib_1.__importDefault(require("classnames"));

const exotic_1 = require("exotic");

const _deps_1 = require("./_deps"); // for the sake of seeing the props added
// const ariaLabel = props['aria-label'] || ''
// props['aria-label'] =
//   ariaLabel +
//   ' when this element is active and you click outside of it, it loses focus in a visual way'


class ClickBoundary extends react_1.default.PureComponent {
  constructor() {
    super(...arguments);
    this.isListening = false;
    this.isActive = false;
    /**
     * @todo update with forwardRef
     */

    this.setRef = dom => {
      this.dom = dom;

      if (exotic_1.isFunction(this.props.innerRef)) {
        this.props.innerRef(dom);
      }
    };

    this.handleMouseEnter = event => {
      this.isActive = false; // this.state.focus()
      // console.log(
      //   'handleMouseEnter event:',
      //   'isActive:',
      //   this.state.isActive,
      //   'isFocused:',
      //   this.state.isFocused
      // )
    };

    this.handleMouseLeave = event => {
      this.isActive = true; // this.state.blur()
      // this.state.setActive(true)
      // console.debug(
      //   '[ClickBoundary] handleMouseLeave',
      //   'isActive',
      //   this.state.isActive,
      //   'isFocused:',
      //   this.state.isFocused
      // )

      this.subscribeListener();
    };

    this.handleClick = event => {
      // console.debug('[ClickBoundary] handleClick ' + this.props.className)
      _deps_1.onClick(event, this.props, this.dom);

      this.isActive = false; // this.state.setActive(false)

      this.unSubscribeListener();
    };
  }
  /**
   * only happens in browser, `willMount` in server
   */


  subscribeListener() {
    if (this.isActive && !this.isListening) {
      // console.debug('[click boundary] subscribing')
      // @note - document.body
      window.addEventListener('click', this.handleClick);
      window.addEventListener('ontouchstart', this.handleClick);
      this.isListening = true;
    }
  }
  /**
   * only happens browser
   */


  unSubscribeListener() {
    if (this.isListening) {
      // console.debug('[click boundary] unsubscribing')
      // remember to remove all events to avoid memory leaks
      window.removeEventListener('click', this.handleClick);
      window.removeEventListener('ontouchstart', this.handleClick);
      this.isListening = false;
    }
  }

  renderChildren(children, attributes) {
    const onChild = child => {
      // 2. safety
      if (typeof child === 'string' || typeof child === 'number') {
        return child;
      } // 3. merge props


      const props = Object.assign({}, attributes, child.props);
      return react_1.default.cloneElement(child, props);
    };

    return react_1.default.Children.map(children, onChild);
  }

  render() {
    const _a = this.props,
          {
      className,
      children,
      onClickOutside,
      nowrap
    } = _a,
          remainingProps = tslib_1.__rest(_a, ["className", "children", "onClickOutside", "nowrap"]);

    const attributes = Object.assign({}, remainingProps, {
      isActive: this.isActive,
      onMouseEnter: this.handleMouseEnter,
      onMouseLeave: this.handleMouseLeave,
      className: classnames_1.default('click-boundary', className)
    });

    if (nowrap) {
      return this.renderChildren(children, attributes);
    } else {
      return react_1.default.createElement("div", Object.assign({}, attributes, {
        ref: this.setRef
      }), this.props.children);
    }
  }

}

exports.ClickBoundary = ClickBoundary;
exports.default = ClickBoundary; //# sourceMappingURL=ClickBoundary.js.map