// Copyright (c) Microsoft Corporation.
// Licensed under the MIT License.
import { Icon } from '@fluentui/react';
import React from 'react';
import { iconWrapperStyle } from '../styles/ChatMessageComponent.styles';
/**
 * Props for the Chat.Message action menu.
 * This is the 3 dots that appear when hovering over one of your own chat messages.
 *
 * @private
 */
export const chatMessageActionMenuProps = (menuProps) => {
    const { ariaLabel, enabled, theme, menuExpanded } = menuProps;
    // Show the action button while the flyout is open (otherwise this will dismiss when the pointer is hovered over the flyout)
    const showActionMenu = enabled || menuExpanded;
    const actionMenuProps = {
        children: React.createElement("div", { tabIndex: showActionMenu ? 0 : undefined, key: "menuButton", "data-testid": "chat-composite-message-action-icon", ref: menuProps.menuButtonRef, onClick: showActionMenu ? () => menuProps.onActionButtonClick() : undefined, style: {
                margin: showActionMenu ? '1px' : 0,
                minHeight: showActionMenu ? undefined : '30px'
            }, role: "button", "aria-label": showActionMenu ? ariaLabel : undefined, "aria-haspopup": showActionMenu, "aria-expanded": menuExpanded, onKeyDown: e => {
                // simulate <button> tag behavior
                if (showActionMenu && (e.key === 'Enter' || e.key === ' ')) {
                    menuProps.onActionButtonClick();
                }
            } }, showActionMenu ? React.createElement(Icon, { iconName: "ChatMessageOptions", "aria-label": ariaLabel, styles: iconWrapperStyle(theme, menuExpanded) }) : undefined)
    };
    return actionMenuProps;
};
//# sourceMappingURL=ChatMessageActionMenu.js.map