"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.EuiFlyoutMenu = void 0;
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _classnames = _interopRequireDefault(require("classnames"));
var _react = _interopRequireWildcard(require("react"));
var _services = require("../../services");
var _button = require("../button");
var _flex = require("../flex");
var _list_group = require("../list_group");
var _popover = require("../popover");
var _title = require("../title");
var _flyout_close_button = require("./_flyout_close_button");
var _flyout_menu = require("./flyout_menu.styles");
var _flyout_menu_context = require("./flyout_menu_context");
var _i18n = require("../i18n");
var _react2 = require("@emotion/react");
var _excluded = ["className", "title", "titleId", "hideTitle", "hideCloseButton", "historyItems", "showBackButton", "backButtonProps", "customActions", "iconType"];
/*
 * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
 * or more contributor license agreements. Licensed under the Elastic License
 * 2.0 and the Server Side Public License, v 1; you may not use this file except
 * in compliance with, at your election, the Elastic License 2.0 or the Server
 * Side Public License, v 1.
 */
/**
 * History item for the flyout menu history popover
 */
/**
 * Custom action item for the flyout menu component
 */
/**
 * Props for EuiFlyoutMenu
 */
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
var BackButton = function BackButton(props) {
  return (0, _react2.jsx)(_button.EuiButtonEmpty, (0, _extends2.default)({
    size: "xs",
    color: "text",
    iconType: "undo",
    "data-test-subj": "euiFlyoutMenuBackButton"
  }, props), (0, _react2.jsx)(_i18n.EuiI18n, {
    token: "euiFlyoutMenu.back",
    default: "Back"
  }));
};
var HistoryPopover = function HistoryPopover(_ref) {
  var items = _ref.items;
  var _useState = (0, _react.useState)(false),
    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
    isPopoverOpen = _useState2[0],
    setIsPopoverOpen = _useState2[1];
  var handlePopoverButtonClick = function handlePopoverButtonClick() {
    setIsPopoverOpen(!isPopoverOpen);
  };
  return (0, _react2.jsx)(_popover.EuiPopover, {
    button: (0, _react2.jsx)(_button.EuiButtonIcon, {
      iconType: "chevronSingleDown",
      color: "text",
      "aria-label": (0, _i18n.useEuiI18n)('euiFlyoutMenu.history', 'History'),
      "data-test-subj": "euiFlyoutMenuHistoryButton"
    }),
    isOpen: isPopoverOpen,
    onClick: handlePopoverButtonClick,
    closePopover: function closePopover() {
      return setIsPopoverOpen(false);
    },
    panelPaddingSize: "xs",
    anchorPosition: "downLeft"
  }, (0, _react2.jsx)(_list_group.EuiListGroup, null, items.map(function (item, index) {
    return (0, _react2.jsx)(_list_group.EuiListGroupItem, {
      key: "history-item-".concat(index),
      label: item.title,
      iconType: item.iconType,
      onClick: function onClick() {
        item.onClick();
        setIsPopoverOpen(false);
      },
      "data-test-subj": "euiFlyoutMenuHistoryItem-".concat(index)
    }, item.title);
  })));
};

/**
 * The component for the top menu bar inside a flyout. Since this is a private
 * component, rendering is controlled using the `flyoutMenuProps` prop on
 * `EuiFlyout`. In managed session flyouts, the Flyout Manager controls a back
 * button and history popover for navigating to different flyout sessions
 * within the managed context.
 *
 * @private
 */
var EuiFlyoutMenu = exports.EuiFlyoutMenu = function EuiFlyoutMenu(_ref2) {
  var className = _ref2.className,
    title = _ref2.title,
    titleId = _ref2.titleId,
    _ref2$hideTitle = _ref2.hideTitle,
    hideTitle = _ref2$hideTitle === void 0 ? true : _ref2$hideTitle,
    hideCloseButton = _ref2.hideCloseButton,
    _ref2$historyItems = _ref2.historyItems,
    historyItems = _ref2$historyItems === void 0 ? [] : _ref2$historyItems,
    showBackButton = _ref2.showBackButton,
    backButtonProps = _ref2.backButtonProps,
    customActions = _ref2.customActions,
    _iconType = _ref2.iconType,
    rest = (0, _objectWithoutProperties2.default)(_ref2, _excluded);
  var _useContext = (0, _react.useContext)(_flyout_menu_context.EuiFlyoutMenuContext),
    onClose = _useContext.onClose;
  var styles = (0, _services.useEuiMemoizedStyles)(_flyout_menu.euiFlyoutMenuStyles);
  var classes = (0, _classnames.default)('euiFlyoutMenu', className);
  var titleNode;
  if (title) {
    titleNode = (0, _react2.jsx)(_title.EuiTitle, {
      size: "xxs",
      id: titleId
    }, (0, _react2.jsx)("h3", {
      css: hideTitle && styles.euiFlyoutMenu__hiddenTitle
    }, title));
  }
  var handleClose = function handleClose(event) {
    onClose === null || onClose === void 0 || onClose(event);
  };
  var closeButton = (0, _react2.jsx)(_flyout_close_button.EuiFlyoutCloseButton, {
    onClose: handleClose,
    side: "right",
    closeButtonPosition: "inside"
  });
  return (0, _react2.jsx)("div", (0, _extends2.default)({
    className: classes,
    css: styles.euiFlyoutMenu__container,
    "data-test-subj": "euiFlyoutMenu"
  }, rest), (0, _react2.jsx)(_flex.EuiFlexGroup, {
    alignItems: "center",
    justifyContent: "spaceBetween",
    gutterSize: "none",
    responsive: false
  }, showBackButton && (0, _react2.jsx)(_flex.EuiFlexItem, {
    grow: false
  }, (0, _react2.jsx)(BackButton, backButtonProps)), historyItems.length > 0 && (0, _react2.jsx)(_flex.EuiFlexItem, {
    grow: false
  }, (0, _react2.jsx)(HistoryPopover, {
    items: historyItems
  })), titleNode && (0, _react2.jsx)(_flex.EuiFlexItem, {
    grow: false
  }, titleNode), (0, _react2.jsx)(_flex.EuiFlexItem, {
    grow: true
  }), customActions && customActions.map(function (action, actionIndex) {
    return (0, _react2.jsx)(_flex.EuiFlexItem, {
      grow: false,
      key: "action-index-flex-item-".concat(actionIndex),
      css: styles.euiFlyoutMenu__actions
    }, (0, _react2.jsx)(_button.EuiButtonIcon, {
      key: "action-index-icon-".concat(actionIndex),
      "aria-label": action['aria-label'],
      iconType: action.iconType,
      onClick: action.onClick,
      color: "text",
      size: "s"
    }));
  }), !hideCloseButton && (0, _react2.jsx)(_flex.EuiFlexItem, {
    grow: false,
    css: styles.euiFlyoutMenu__spacer
  })), !hideCloseButton && closeButton);
};