import "core-js/modules/web.dom.iterable";
import "core-js/modules/es6.array.iterator";
import "core-js/modules/es6.object.keys";
import "core-js/modules/es6.object.assign";

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; }

import React from 'react';
import PropTypes from 'prop-types';
import { omit } from 'lodash';
import { EventOverlay } from "./..";
/**
 * @category containers
 * @component menu-overlay
 * @variations collab-ui-react
 */

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

  function MenuOverlay() {
    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.getChildContext = function () {
      return {
        onSelect: _this.onSelect
      };
    };

    _this.verifyChildren = function () {
      var children = _this.props.children;
      var status = React.Children.toArray(children).reduce(function (status, child) {
        return status && child.type && (child.type.displayName === 'MenuContent' || child.type.displayName === 'Menu');
      }, true);

      if (!status) {
        throw new Error('MenuOverlay should only contain Menu or MenuContent as children');
      }
    };

    _this.onSelect = function (e, menuIndex, menuItem) {
      var onSelect = _this.props.onSelect;
      var keepMenuOpen = menuItem.props.keepMenuOpen;
      onSelect && onSelect(e, menuIndex, menuItem);
      menuItem.constructor.displayName !== 'SubMenu' && !keepMenuOpen && _this.handleClose();
    };

    _this.handleClose = function () {
      _this.setState({
        isOpen: false
      });
    };

    return _this;
  }

  var _proto = MenuOverlay.prototype;

  _proto.componentWillMount = function componentWillMount() {
    this.verifyChildren();
  };

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

    var _this$props = this.props,
        children = _this$props.children,
        className = _this$props.className,
        menuTrigger = _this$props.menuTrigger,
        showArrow = _this$props.showArrow,
        props = _objectWithoutPropertiesLoose(_this$props, ["children", "className", "menuTrigger", "showArrow"]);

    var isOpen = this.state.isOpen;
    var otherProps = omit(Object.assign({}, props), ['onSelect']);

    var setMenuTrigger = function setMenuTrigger() {
      return React.cloneElement(menuTrigger, {
        onClick: function onClick() {
          return _this2.setState({
            isOpen: !isOpen
          });
        },
        ref: function ref(_ref) {
          return _this2.anchorNode = _ref;
        }
      });
    };

    return React.createElement("div", {
      className: 'cui-menu-overlay-wrapper' + ("" + (className && " " + className || ''))
    }, setMenuTrigger(), React.createElement(EventOverlay, _extends({
      allowClickAway: true,
      anchorNode: this.anchorNode,
      className: "cui-menu-overlay",
      close: this.handleClose,
      isOpen: isOpen,
      showArrow: showArrow
    }, otherProps), children));
  };

  return MenuOverlay;
}(React.Component);

MenuOverlay.childContextTypes = {
  onSelect: PropTypes.func
};
MenuOverlay.propTypes = {
  /** @prop Children nodes to render inside MenuOverlay | null */
  children: PropTypes.node,

  /** @prop Optional css class name | '' */
  className: PropTypes.string,

  /** @prop HTML element that provides control to MenuOverlay user  */
  menuTrigger: PropTypes.element.isRequired,

  /** @prop Callback function invoked when user selects MenuOverlay | null */
  onSelect: PropTypes.func,

  /** @prop Determines if the MenuOverlay should show the open/close arrow | true */
  showArrow: PropTypes.bool
};
MenuOverlay.defaultProps = {
  children: null,
  className: '',
  onSelect: null,
  showArrow: true
};
MenuOverlay.displayName = 'MenuOverlay';
export default MenuOverlay;
/**
* @component menu
* @section default
* @react
*

import {
  Button,
  EditableTextfield,
  Menu,
  MenuContent,
  MenuItem,
  MenuOverlay,
} from '@collab-ui/react';

export default class MenuOverlayDefault extends React.PureComponent {
  onClick(event, value) {
    alert(`${value} clicked`);
  }

  render() {
    return(
      <MenuOverlay
        menuTrigger={<Button ariaLabel="Show Menu">Show Menu</Button>}>
        <MenuContent>
          <EditableTextfield inputText="Content Area" />
        </MenuContent>
        <Menu>
          <MenuItem onClick={this.onClick} label="Settings" />
        </Menu>
      </MenuOverlay>
    );
  }
}
**/

/**
* @component menu
* @section sub-menu
* @react
*

import {
  Button,
  Menu,
  MenuItem,
  MenuOverlay,
  SubMenu
} from '@collab-ui/react';

export default class MenuOverlaySubMenu extends React.PureComponent {
  onClick(event, value) {
    alert(`${value} clicked`);
  }

  render() {
    return(
      <MenuOverlay
        menuTrigger={
          <Button ariaLabel='Show Menu'>Show Menu</Button>
        }
      >
        <Menu>
          <SubMenu
            selectedValue="English"
            label="Language"
          >
            <MenuItem label="English" />
            <MenuItem label="Spanish" />
          </SubMenu>
        </Menu>
      </MenuOverlay>
    );
  }
}
**/

/**
* @component menu
* @section custom-menu-items
* @react
*

import {
  Button,
  Icon,
  ListItemSection,
  Menu,
  MenuContent,
  MenuItem,
  MenuOverlay,
} from '@collab-ui/react';

export default class CustomMenuItems extends React.PureComponent {
  onClick(event, value) {
    alert(`${value} clicked`);
  }

  render() {
    return(
      <MenuOverlay
        menuTrigger={
          <Button ariaLabel='Show Custom Menu'>Show Customized MenuItems</Button>
        }
        direction='top-center'
      >
        <MenuContent>Content</MenuContent>
        <Menu>
          <MenuItem>
            <ListItemSection position="left">
              <Icon name='edit_20' />
            </ListItemSection>
            <ListItemSection position="center">
              Edit space settings
          </ListItemSection>
          </MenuItem>
          <MenuItem keepMenuOpen>
            <ListItemSection position="left">
              <Icon name='favorite_20' />
            </ListItemSection>
            <ListItemSection position="center">
              Add to favorites
          </ListItemSection>
          </MenuItem>
          <MenuItem>
            <ListItemSection position="left">
              <Icon name='alert_20' />
            </ListItemSection>
            <ListItemSection position="center">
              Notifications
          </ListItemSection>
          </MenuItem>
          <MenuItem>
            <ListItemSection position="left">
              <Icon name='accessories_20' />
            </ListItemSection>
            <ListItemSection position="center">
              Add Integrations & Bots
          </ListItemSection>
          </MenuItem>
          <MenuItem>
            <ListItemSection position="left">
              <Icon name='stored-info_20' />
            </ListItemSection>
            <ListItemSection position="center">
              View space policy
          </ListItemSection>
          </MenuItem>
          <MenuItem keepMenuOpen>
            <ListItemSection position="left">
              <Icon name='archive_20' />
            </ListItemSection>
            <ListItemSection position="center">
              Archive space
          </ListItemSection>
          </MenuItem>
          <MenuItem keepMenuOpen>
            <ListItemSection position="left">
              <Icon name='cancel_20' />
            </ListItemSection>
            <ListItemSection position="center">
              Remove space from team
          </ListItemSection>
          </MenuItem>
          <MenuItem>
            <ListItemSection position="left">
              <Icon name='exit-room_20' />
            </ListItemSection>
            <ListItemSection position="center">
              Leave space
          </ListItemSection>
          </MenuItem>
        </Menu>
      </MenuOverlay>
    );
  }
}
**/