"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.Menu = void 0;

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

var _styledComponents = _interopRequireDefault(require("styled-components"));

var _primitives = require("../../../primitives");

var _text = require("../../typography/text");

var _unstyledButton = require("../../behaviors/unstyled-button");

var _branding = require("../../../mixins/branding");

var _expandMoreIcon = require("../../icon/expand-more-icon");

var _menuItemList = require("./menu-item-list");

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

var HoverText = (0, _styledComponents["default"])(_text.Text).withConfig({
  displayName: "HoverText",
  componentId: "j5n2u0-0"
})(["color:", ";&:hover{color:", ";}"], (0, _branding.getPaletteColor)('greyscale-dark'), (0, _branding.getPaletteColor)('greyscale-black'));

var DefaultTrigger = function DefaultTrigger(_ref) {
  var label = _ref.label,
      isOpen = _ref.isOpen;
  return /*#__PURE__*/_react["default"].createElement(_primitives.Box, {
    spacing: "p1",
    stacked: "row",
    justify: "space-between",
    align: "center"
  }, /*#__PURE__*/_react["default"].createElement(HoverText, {
    spacing: ['mb0', 'mr1'],
    fontSize: "f1",
    bold: true
  }, label), /*#__PURE__*/_react["default"].createElement(_expandMoreIcon.ExpandMoreIcon, {
    isOpen: isOpen
  }));
};

var Menu = function Menu(_ref2) {
  var className = _ref2.className,
      spacing = _ref2.spacing,
      children = _ref2.children,
      grow = _ref2.grow,
      shrink = _ref2.shrink,
      basis = _ref2.basis,
      dataQa = _ref2['data-qa'],
      dataCy = _ref2['data-cy'],
      id = _ref2.id,
      label = _ref2.label,
      _ref2$TriggerComponen = _ref2.TriggerComponent,
      TriggerComponent = _ref2$TriggerComponen === void 0 ? DefaultTrigger : _ref2$TriggerComponen,
      isOpen = _ref2.isOpen,
      onToggle = _ref2.onToggle,
      _ref2$flatTopCorners = _ref2.flatTopCorners,
      flatTopCorners = _ref2$flatTopCorners === void 0 ? false : _ref2$flatTopCorners,
      dropdownSpacing = _ref2.dropdownSpacing,
      _ref2$direction = _ref2.direction,
      direction = _ref2$direction === void 0 ? 'right' : _ref2$direction;

  var handleKeyDown = function handleKeyDown(event) {
    if (event.key === 'ArrowDown') {
      onToggle();
      event.stopPropagation();
    }
  };

  return /*#__PURE__*/_react["default"].createElement(_primitives.Box, {
    role: "menu",
    spacing: spacing,
    grow: grow,
    shrink: shrink,
    basis: basis
  }, /*#__PURE__*/_react["default"].createElement(_unstyledButton.UnstyledButton, {
    className: className,
    "data-cy": dataCy,
    "data-qa": dataQa,
    id: id,
    stacked: "row",
    align: "center",
    justify: "space-between",
    onClick: function onClick(e) {
      onToggle();
      e.stopPropagation();
    },
    role: "menuitem",
    "aria-haspopup": true,
    "aria-expanded": isOpen,
    onKeyDown: handleKeyDown
  }, /*#__PURE__*/_react["default"].createElement(TriggerComponent, {
    label: label,
    isOpen: isOpen
  })), isOpen && /*#__PURE__*/_react["default"].createElement(_menuItemList.MenuItemList, {
    flatTopCorners: flatTopCorners,
    onToggle: onToggle,
    spacing: dropdownSpacing,
    direction: direction
  }, children));
};

exports.Menu = Menu;
Menu.displayName = 'Menu';