"use strict";

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

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

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

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

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

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

/**
 * @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.default.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 = (0, _lodash.omit)(Object.assign({}, props), ['onSelect']);

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

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

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

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

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

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

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

  /** @prop Determines if the MenuOverlay should show the open/close arrow | true */
  showArrow: _propTypes.default.bool
};
MenuOverlay.defaultProps = {
  children: null,
  className: '',
  onSelect: null,
  showArrow: true
};
MenuOverlay.displayName = 'MenuOverlay';
var _default = MenuOverlay;
/**
* @name Menu Overlay
*
* @category containers
* @component menu-overlay
* @section default
*
* @js
*

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

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

  render() {
    return(
      <div className='row'>

        <div className="docs-example docs-example--spacing">
          <MenuOverlay
            menuTrigger={
              <Button ariaLabel='Show Menu'>Show Menu</Button>
            }
          >
            <MenuContent>
              <EditableTextfield inputText='Content Area'/>
            </MenuContent>
            <Menu>
              <SubMenu
                selectedValue="Out of office until 2:00pm"
                label="Status"
              >
                <MenuItem isHeader label="Set Do Not Disturb:"/>
                <MenuItem disabled label="1 hour" onClick={this.onClick} value="1 hour"/>
                <MenuItem keepMenuOpen label="5 hour" onClick={this.onClick} value="5 hour"/>
                <MenuItem keepMenuOpen label="8 hour"/>
              </SubMenu>
              <SubMenu
                selectedValue="English"
                label="Language"
              >
                <MenuItem label="English"/>
                <MenuItem label="Spanish"/>
              </SubMenu>
              <MenuItem
                label="Settings"
              />
            </Menu>
          </MenuOverlay>
        </div>

        <div className="docs-example docs-example--spacing">

          <h3>
            <p><code className="small">direction=(top-center)</code></p>
          </h3>
          <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>
        </div>

      </div>
    );
  }
}
**/

exports.default = _default;