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

import * as React from 'react';
import { More as MoreIcon } from '@fluent-ui/icons'; // TODO treeShaking

import { useClickOutside, useReveal, usePopper } from '@fluent-ui/hooks'; // TODO treeShaking

import { omit } from '../utils';
import Box from '../Box';
import { styles } from './Command.styled';
import Secondary from './components/Secondary';
import Content from './components/Content';
import Portal from '../Portal';
import Item from '../Item';
import Transition from '../Transition';
import { CommandPropTypes } from './Command.type';
import { createUseStyles } from 'react-jss';
import classNames from 'classnames';
export const name = 'Command';
const useStyles = createUseStyles(styles, {
  name
});
export const CommandContext = React.createContext(false);
const Command = React.forwardRef((props, ref) => {
  const {
    as = 'div',
    className: classNameProp,
    acrylic = false,
    reveal = false,
    children,
    ...rest
  } = props;
  const classes = useStyles(props);
  const className = classNames(classes.root, classNameProp);
  const container = {
    content: [],
    standard: [],
    secondary: []
  };
  React.Children.forEach(children, child => {
    if (child.type.displayName === 'FCommandContent') {
      container.content.push(child);
    } else if (child.type.displayName === 'FCommandSecondary') {
      container.secondary = child.props.children;
    } else {
      container.standard.push(child);
    }
  }); // Reveal does not take effect when using acrylic

  const _reveal = acrylic ? false : reveal;

  const [RevealWrapper] = useReveal(); // Secondary Popup related

  const [secondaryVisible, setSecondaryVisible] = React.useState(false);

  function handleSecondaryVisible() {
    if (secondaryVisible) return;
    setSecondaryVisible(visible => !visible);
  } // Click on the area outside the More menu to close the More menu.


  const [referenceRef, popperRef] = usePopper({
    placement: 'bottom'
  });
  useClickOutside(popperRef, event => {
    // @ts-ignore
    if (!referenceRef.current || referenceRef.current.contains(event.target)) return;
    setSecondaryVisible(visible => !visible);
  });
  const otherProps = omit(rest, ['display', 'backgroundColor', 'color']);
  return React.createElement(Box, _extends({
    ref: ref,
    as: as,
    acrylic: acrylic,
    className: className,
    backgroundColor: "standard.light2"
  }, otherProps), React.createElement(CommandContext.Provider, {
    value: _reveal
  }, !!container.content.length && React.createElement("div", {
    className: classes.content
  }, container.content), React.createElement("div", {
    className: classes.primary
  }, _reveal ? container.standard.map((child, i) => React.createElement(RevealWrapper, {
    key: i
  }, child)) : container.standard), !!container.secondary.length && (_reveal ? React.createElement(RevealWrapper, null, React.createElement(Item, {
    ref: referenceRef,
    style: {
      height: '100%'
    },
    onClick: handleSecondaryVisible,
    prefix: React.createElement(MoreIcon, null)
  })) : React.createElement(Item, {
    ref: referenceRef,
    onClick: handleSecondaryVisible,
    prefix: React.createElement(MoreIcon, null)
  })), React.createElement(Portal, null, React.createElement(Transition, {
    visible: secondaryVisible,
    wrapper: true,
    mountOnEnter: true,
    unmountOnExit: true
  }, React.createElement(Box, {
    ref: popperRef,
    acrylic: acrylic,
    backgroundColor: "standard.light2",
    className: classes.secondaryRoot
  }, container.secondary)))));
});
Object.defineProperty(Command, 'Secondary', {
  get() {
    return Secondary;
  }

});
Object.defineProperty(Command, 'Content', {
  get() {
    return Content;
  }

});
Command.displayName = `F${name}`;
Command.propTypes = CommandPropTypes;
export default Command;