import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import _extends from "@babel/runtime/helpers/extends";
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.
 */

import classNames from 'classnames';
import React, { useContext, useState } from 'react';
import { useEuiMemoizedStyles } from '../../services';
import { EuiButtonEmpty, EuiButtonIcon } from '../button';
import { EuiFlexGroup, EuiFlexItem } from '../flex';
import { EuiListGroup, EuiListGroupItem } from '../list_group';
import { EuiPopover } from '../popover';
import { EuiTitle } from '../title';
import { EuiFlyoutCloseButton } from './_flyout_close_button';
import { euiFlyoutMenuStyles } from './flyout_menu.styles';
import { EuiFlyoutMenuContext } from './flyout_menu_context';
import { EuiI18n, useEuiI18n } from '../i18n';

/**
 * History item for the flyout menu history popover
 */

/**
 * Custom action item for the flyout menu component
 */

/**
 * Props for EuiFlyoutMenu
 */
import { jsx as ___EmotionJSX } from "@emotion/react";
var BackButton = function BackButton(props) {
  return ___EmotionJSX(EuiButtonEmpty, _extends({
    size: "xs",
    color: "text",
    iconType: "undo",
    "data-test-subj": "euiFlyoutMenuBackButton"
  }, props), ___EmotionJSX(EuiI18n, {
    token: "euiFlyoutMenu.back",
    default: "Back"
  }));
};
var HistoryPopover = function HistoryPopover(_ref) {
  var items = _ref.items;
  var _useState = useState(false),
    _useState2 = _slicedToArray(_useState, 2),
    isPopoverOpen = _useState2[0],
    setIsPopoverOpen = _useState2[1];
  var handlePopoverButtonClick = function handlePopoverButtonClick() {
    setIsPopoverOpen(!isPopoverOpen);
  };
  return ___EmotionJSX(EuiPopover, {
    button: ___EmotionJSX(EuiButtonIcon, {
      iconType: "chevronSingleDown",
      color: "text",
      "aria-label": useEuiI18n('euiFlyoutMenu.history', 'History'),
      "data-test-subj": "euiFlyoutMenuHistoryButton"
    }),
    isOpen: isPopoverOpen,
    onClick: handlePopoverButtonClick,
    closePopover: function closePopover() {
      return setIsPopoverOpen(false);
    },
    panelPaddingSize: "xs",
    anchorPosition: "downLeft"
  }, ___EmotionJSX(EuiListGroup, null, items.map(function (item, index) {
    return ___EmotionJSX(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
 */
export var 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 = _objectWithoutProperties(_ref2, _excluded);
  var _useContext = useContext(EuiFlyoutMenuContext),
    onClose = _useContext.onClose;
  var styles = useEuiMemoizedStyles(euiFlyoutMenuStyles);
  var classes = classNames('euiFlyoutMenu', className);
  var titleNode;
  if (title) {
    titleNode = ___EmotionJSX(EuiTitle, {
      size: "xxs",
      id: titleId
    }, ___EmotionJSX("h3", {
      css: hideTitle && styles.euiFlyoutMenu__hiddenTitle
    }, title));
  }
  var handleClose = function handleClose(event) {
    onClose === null || onClose === void 0 || onClose(event);
  };
  var closeButton = ___EmotionJSX(EuiFlyoutCloseButton, {
    onClose: handleClose,
    side: "right",
    closeButtonPosition: "inside"
  });
  return ___EmotionJSX("div", _extends({
    className: classes,
    css: styles.euiFlyoutMenu__container,
    "data-test-subj": "euiFlyoutMenu"
  }, rest), ___EmotionJSX(EuiFlexGroup, {
    alignItems: "center",
    justifyContent: "spaceBetween",
    gutterSize: "none",
    responsive: false
  }, showBackButton && ___EmotionJSX(EuiFlexItem, {
    grow: false
  }, ___EmotionJSX(BackButton, backButtonProps)), historyItems.length > 0 && ___EmotionJSX(EuiFlexItem, {
    grow: false
  }, ___EmotionJSX(HistoryPopover, {
    items: historyItems
  })), titleNode && ___EmotionJSX(EuiFlexItem, {
    grow: false
  }, titleNode), ___EmotionJSX(EuiFlexItem, {
    grow: true
  }), customActions && customActions.map(function (action, actionIndex) {
    return ___EmotionJSX(EuiFlexItem, {
      grow: false,
      key: "action-index-flex-item-".concat(actionIndex),
      css: styles.euiFlyoutMenu__actions
    }, ___EmotionJSX(EuiButtonIcon, {
      key: "action-index-icon-".concat(actionIndex),
      "aria-label": action['aria-label'],
      iconType: action.iconType,
      onClick: action.onClick,
      color: "text",
      size: "s"
    }));
  }), !hideCloseButton && ___EmotionJSX(EuiFlexItem, {
    grow: false,
    css: styles.euiFlyoutMenu__spacer
  })), !hideCloseButton && closeButton);
};