"use strict";

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

require("core-js/modules/es6.array.iterator");

require("core-js/modules/es6.object.keys");

require("core-js/modules/es6.object.assign");

require("core-js/modules/es7.array.includes");

require("core-js/modules/es6.string.includes");

require("core-js/modules/web.dom.iterable");

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

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

var _lodash = require("lodash");

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 _objectWithoutPropertiesLoose(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]; } return target; }

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

function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }

var SubMenu =
/*#__PURE__*/
function (_React$Component) {
  _inheritsLoose(SubMenu, _React$Component);

  function SubMenu() {
    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 = {
      anchorRef: null
    };

    _this.verifyChildrenElements = function (nameArr) {
      var children = _this.props.children;
      var elementCount = 0;
      var childrenLength = 0;

      _react.default.Children.forEach(children, function (child) {
        childrenLength++;

        if (child.type && nameArr.includes(child.type.displayName)) {
          return elementCount++;
        }
      });

      return elementCount === childrenLength;
    };

    _this.handleKeyDown = function (e) {
      var _this$props = _this.props,
          onClick = _this$props.onClick,
          index = _this$props.index;
      var _this$context = _this.context,
          handleKeyDown = _this$context.handleKeyDown,
          handleClick = _this$context.handleClick;

      if (e.which === 32 || e.which === 13 || e.charCode === 32 || e.charCode === 13) {
        onClick && onClick(e);
        handleClick && handleClick(e, index, _assertThisInitialized(_assertThisInitialized(_this)));
        e.preventDefault();
      } else {
        handleKeyDown && handleKeyDown(e, index, _assertThisInitialized(_assertThisInitialized(_this)));
      }
    };

    _this.handleClick = function (e) {
      var handleClick = _this.context.handleClick;
      var _this$props2 = _this.props,
          index = _this$props2.index,
          onClick = _this$props2.onClick;
      onClick && onClick(e);
      handleClick && handleClick(e, index, _assertThisInitialized(_assertThisInitialized(_this)));
    };

    return _this;
  }

  var _proto = SubMenu.prototype;

  _proto.componentDidMount = function componentDidMount() {
    var children = this.props.children;

    if (!children) {
      throw new Error("[@collab-ui/react] SubMenu: children are required for this component.");
    } else if (!this.verifyChildrenElements(['MenuItem', 'SubMenu'])) {
      throw new Error("[@collab-ui/react] SubMenu: children must be SubMenu or MenuItem");
    }
  };

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

    var _this$props3 = this.props,
        children = _this$props3.children,
        className = _this$props3.className,
        content = _this$props3.content,
        customNode = _this$props3.customNode,
        isHeader = _this$props3.isHeader,
        isOpen = _this$props3.isOpen,
        label = _this$props3.label,
        selectedValue = _this$props3.selectedValue,
        props = _objectWithoutPropertiesLoose(_this$props3, ["children", "className", "content", "customNode", "isHeader", "isOpen", "label", "selectedValue"]);

    var otherProps = (0, _lodash.omit)(Object.assign({}, props), ['customNode', 'index', 'keepMenuOpen', 'onClick']);
    return _react.default.createElement("div", {
      className: 'cui-menu-item' + ("" + (className && " " + className || '')),
      "aria-expanded": isOpen,
      "aria-haspopup": !!children
    }, _react.default.createElement(_.ListItem, _extends({
      active: isOpen,
      focusOnLoad: true,
      isReadOnly: isHeader,
      onClick: this.handleClick,
      onKeyDown: this.handleKeyDown,
      ref: function ref(_ref) {
        return !_this2.state.anchorRef && _this2.setState({
          anchorRef: _ref
        });
      },
      role: "menuitem"
    }, otherProps), customNode ? customNode : [_react.default.createElement("div", {
      className: "cui-menu-item__content",
      key: "content-0"
    }, content || label), _react.default.createElement("div", {
      className: "cui-menu-item__selected-value",
      title: selectedValue,
      key: "content-1"
    }, children && selectedValue), _react.default.createElement("div", {
      className: "cui-menu-item__arrow",
      key: "content-2"
    }, children && _react.default.createElement(_.Icon, {
      name: "arrow-right_16"
    }))]), isOpen && _react.default.createElement(_.EventOverlay, {
      anchorNode: this.state.anchorRef,
      isOpen: isOpen,
      direction: "right-top",
      closeOnClick: false,
      isContained: true
    }, _react.default.createElement("div", {
      "aria-label": label,
      role: "menu",
      className: "cui-menu-item-container"
    }, children)));
  };

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

SubMenu.propTypes = {
  /** @prop Children nodes to render inside SubMenu | null */
  children: _propTypes.default.node,

  /** @prop Optional CSS class names | '' */
  className: _propTypes.default.string,

  /** @prop SubMenu content element | null */
  content: _propTypes.default.element,

  /** @prop SubMenu custom Node | null */
  customNode: _propTypes.default.node,

  /** @prop Index of SubMenu | [] */
  index: _propTypes.default.array,

  /** @prop Determines if the SubMenu is the header | false */
  isHeader: _propTypes.default.bool,

  /** @prop Determines if the SubMenu is Open | false */
  isOpen: _propTypes.default.bool,

  /** @prop Boolean whether to keep the SubMenu open | false */
  keepMenuOpen: _propTypes.default.bool,

  /** @prop SubMenu label string | '' */
  label: _propTypes.default.string,

  /** @prop Callback function invoked when user clicks the SubMenu | null */
  onClick: _propTypes.default.func,

  /** @prop Initial selected value within SubMenu | '' */
  selectedValue: _propTypes.default.string
};
SubMenu.defaultProps = {
  children: null,
  className: '',
  content: null,
  customNode: null,
  index: [],
  isHeader: false,
  isOpen: false,
  keepMenuOpen: false,
  label: '',
  onClick: null,
  selectedValue: ''
};
SubMenu.contextTypes = {
  handleClick: _propTypes.default.func,
  handleKeyDown: _propTypes.default.func
};
SubMenu.displayName = 'SubMenu';
var _default = SubMenu;
exports.default = _default;