// Copyright (c) Microsoft Corporation.
// Licensed under the MIT License.
import { concatStyleSets, ContextualMenu, DirectionalHint, Persona, PersonaSize, useTheme } from '@fluentui/react';
import { _pxToRem, _formatString } from "../../../../acs-ui-common/src";
import React, { useMemo } from 'react';
import { chatMessageMenuStyle, menuIconStyleSet, menuItemIncreasedSizeStyles, menuSubIconStyleSet } from '../styles/ChatMessageComponent.styles';
/**
 * Chat message actions flyout that contains actions such as Edit Message, or Remove Message.
 *
 * @private
 */
export const ChatMessageActionFlyout = (props) => {
    var _a, _b;
    const theme = useTheme();
    const messageReadByCount = (_a = props.messageReadBy) === null || _a === void 0 ? void 0 : _a.length;
    const sortedMessageReadyByList = [...((_b = props.messageReadBy) !== null && _b !== void 0 ? _b : [])].sort((a, b) => a.displayName.localeCompare(b.displayName));
    const messageReadByList = sortedMessageReadyByList === null || sortedMessageReadyByList === void 0 ? void 0 : sortedMessageReadyByList.map(person => {
        const personaOptions = {
            hidePersonaDetails: true,
            size: PersonaSize.size24,
            text: person.displayName,
            showOverflowTooltip: false,
            styles: {
                root: {
                    margin: '0.25rem'
                }
            }
        };
        const { onRenderAvatar } = props;
        return {
            'data-ui-id': 'chat-composite-message-contextual-menu-read-name-list-item',
            key: person.displayName,
            text: person.displayName,
            itemProps: {
                styles: props.increaseFlyoutItemSize ? menuItemIncreasedSizeStyles : undefined
            },
            onRenderIcon: () => {
                var _a;
                if (onRenderAvatar) {
                    const rendered = onRenderAvatar((_a = person.id) !== null && _a !== void 0 ? _a : '', personaOptions);
                    if (rendered) {
                        return rendered;
                    }
                }
                return React.createElement(Persona, Object.assign({}, personaOptions));
            },
            iconProps: {
                styles: menuIconStyleSet
            }
        };
    });
    const menuItems = useMemo(() => {
        const items = [{
                key: 'Edit',
                'data-testid': 'chat-composite-message-contextual-menu-edit-action',
                text: props.strings.editMessage,
                itemProps: {
                    styles: props.increaseFlyoutItemSize ? menuItemIncreasedSizeStyles : undefined
                },
                iconProps: {
                    iconName: 'MessageEdit',
                    styles: menuIconStyleSet
                },
                onClick: props.onEditClick
            }, {
                key: 'Remove',
                'data-testid': 'chat-composite-message-contextual-menu-remove-action',
                text: props.strings.removeMessage,
                itemProps: {
                    styles: props.increaseFlyoutItemSize ? menuItemIncreasedSizeStyles : undefined
                },
                iconProps: {
                    iconName: 'MessageRemove',
                    styles: menuIconStyleSet
                },
                onClick: props.onRemoveClick
            }];
        // only show read by x of y if more than 3 participants in total including myself
        // only show read by x of y if less than 20 participants in total including myself. This is because read by is not supported for 20 or more participants.
        // TODO: change strings.messageReadCount to be required if we can fallback to our own en-us strings for anything that Contoso doesn't provide
        if (props.remoteParticipantsCount && messageReadByCount !== undefined && props.remoteParticipantsCount >= 2 && props.remoteParticipantsCount < 19 && props.showMessageStatus && props.strings.messageReadCount && props.messageStatus !== 'failed') {
            items.push({
                key: 'Read Count',
                'data-ui-id': 'chat-composite-message-contextual-menu-read-info',
                text: _formatString(props.strings.messageReadCount, {
                    messageReadByCount: `${messageReadByCount}`,
                    remoteParticipantsCount: `${props.remoteParticipantsCount}`
                }),
                itemProps: {
                    styles: concatStyleSets({
                        linkContent: {
                            color: messageReadByCount > 0 ? theme.palette.neutralPrimary : theme.palette.neutralTertiary
                        },
                        root: {
                            borderTop: `1px solid ${theme.palette.neutralLighter}`
                        }
                    }, props.increaseFlyoutItemSize ? menuItemIncreasedSizeStyles : undefined)
                },
                calloutProps: preventUnwantedDismissProps,
                subMenuProps: {
                    items: messageReadByList !== null && messageReadByList !== void 0 ? messageReadByList : [],
                    calloutProps: preventUnwantedDismissProps,
                    styles: concatStyleSets({
                        root: {
                            maxWidth: _pxToRem(320),
                            span: {
                                overflow: 'hidden',
                                textOverflow: 'ellipsis'
                            }
                        }
                    })
                },
                iconProps: {
                    iconName: 'MessageSeen',
                    styles: {
                        root: {
                            color: messageReadByCount > 0 ? theme.palette.themeDarkAlt : theme.palette.neutralTertiary
                        }
                    }
                },
                submenuIconProps: {
                    iconName: 'HorizontalGalleryRightButton',
                    styles: menuSubIconStyleSet
                },
                disabled: messageReadByCount <= 0
            });
        }
        else if (props.messageStatus === 'failed' && props.strings.resendMessage) {
            items.push({
                key: 'Resend',
                text: props.strings.resendMessage,
                itemProps: {
                    styles: concatStyleSets({
                        linkContent: {
                            color: theme.palette.neutralPrimary
                        },
                        root: {
                            borderTop: `1px solid ${theme.palette.neutralLighter}`
                        }
                    }, props.increaseFlyoutItemSize ? menuItemIncreasedSizeStyles : undefined)
                },
                calloutProps: preventUnwantedDismissProps,
                iconProps: {
                    iconName: 'MessageResend',
                    styles: {
                        root: {
                            color: theme.palette.themeDarkAlt
                        }
                    }
                },
                onClick: props.onResendClick
            });
        }
        return items;
    }, [props.strings.editMessage, props.strings.removeMessage, props.strings.messageReadCount, props.strings.resendMessage, props.messageStatus, props.increaseFlyoutItemSize, props.onEditClick, props.onRemoveClick, props.onResendClick, props.remoteParticipantsCount, props.showMessageStatus, messageReadByCount, theme.palette.neutralPrimary, theme.palette.neutralTertiary, theme.palette.neutralLighter, theme.palette.themeDarkAlt, messageReadByList]);
    // gap space uses pixels
    return React.createElement(ContextualMenu, { alignTargetEdge: true, gapSpace: 2 /*px*/, isBeakVisible: false, items: menuItems, hidden: props.hidden, target: props.target, onDismiss: props.onDismiss, directionalHint: DirectionalHint.topRightEdge, className: chatMessageMenuStyle, calloutProps: calloutMenuProps });
};
/**
 * Similar to {@link preventDismissOnEvent}, but not prevent dismissing from scrolling, since it is causing bugs in chat thread.
 */
const preventUnwantedDismissProps = {
    preventDismissOnEvent: (ev) => {
        return ev.type === 'resize';
    }
};
const calloutMenuProps = Object.assign(Object.assign({}, preventUnwantedDismissProps), { styles: {
        root: {
            marginRight: '3px'
        }
    } });
//# sourceMappingURL=ChatMessageActionsFlyout.js.map