// Copyright (c) Microsoft Corporation.
// Licensed under the MIT License.
import { Text, mergeStyles } from '@fluentui/react';
import { ChatMessage as FluentChatMessage } from '@fluentui-contrib/react-chat';
import React, { useCallback, useMemo } from 'react';
import { chatMessageDateStyle, chatMessageAuthorStyle, chatMessageDateFailedStyle } from '../../styles/ChatMessageComponent.styles';
import { useIdentifiers } from '../../../identifiers/IdentifierProvider';
import { useTheme } from '../../../theming';
import { useLocale } from '../../../localization';
import { createStyleFromV8Style } from '../../styles/v8StyleShim';
import { mergeClasses } from '@fluentui/react-components';
import { useChatMessageStyles, useChatMessageCommonStyles } from '../../styles/MessageThread.styles';
import { generateCustomizedTimestamp, generateDefaultTimestamp, getMessageBubbleContent, getMessageEditedDetails } from '../../utils/ChatMessageComponentUtils';
/** @private */
const MessageBubble = (props) => {
    const ids = useIdentifiers();
    const theme = useTheme();
    const locale = useLocale();
    const { userId, message, showDate, messageContainerStyle, strings, onRenderAttachmentDownloads, inlineImageOptions, shouldOverlapAvatarAndMessage, actionsForAttachment, onDisplayDateTimeString } = props;
    const formattedTimestamp = useMemo(() => {
        const defaultTimeStamp = message.createdOn ? generateDefaultTimestamp(message.createdOn, showDate, strings) : undefined;
        const customTimestamp = message.createdOn ? generateCustomizedTimestamp(message.createdOn, locale, onDisplayDateTimeString) : '';
        return customTimestamp || defaultTimeStamp;
    }, [locale, message.createdOn, onDisplayDateTimeString, showDate, strings]);
    const getMessageDetails = useCallback(() => {
        return getMessageEditedDetails(message, theme, strings.editedTag);
    }, [strings.editedTag, theme, message]);
    const getContent = useCallback(() => {
        return getMessageBubbleContent(message, strings, userId, inlineImageOptions, onRenderAttachmentDownloads, actionsForAttachment);
    }, [actionsForAttachment, inlineImageOptions, message, onRenderAttachmentDownloads, strings, userId]);
    const isBlockedMessage = 
    // eslint-disable-next-line no-constant-binary-expression
    false;
    const chatMessageCommonStyles = useChatMessageCommonStyles();
    const chatMessageStyles = useChatMessageStyles();
    const chatItemMessageContainerClassName = mergeClasses(chatMessageCommonStyles.body, chatMessageStyles.body, 
    // disable placeholder functionality for GA releases as it might confuse users
    chatMessageCommonStyles.bodyWithPlaceholderImage, isBlockedMessage ? chatMessageCommonStyles.blocked : props.message.status === 'failed' ? chatMessageCommonStyles.failed : undefined, shouldOverlapAvatarAndMessage ? chatMessageStyles.avatarOverlap : chatMessageStyles.avatarNoOverlap, message.attached === 'top' || message.attached === false ? chatMessageStyles.bodyWithAvatar : chatMessageStyles.bodyWithoutAvatar, 
    // messageContainerStyle used in className and style prop as style prop can't handle CSS selectors
    mergeStyles(messageContainerStyle));
    const attached = message.attached === true ? 'center' : message.attached === 'bottom' ? 'bottom' : 'top';
    const chatMessage = React.createElement(React.Fragment, null,
        React.createElement("div", { key: props.message.messageId },
            React.createElement(FluentChatMessage, { attached: attached, key: props.message.messageId, root: {
                    className: chatMessageStyles.root
                }, author: React.createElement(Text, { className: chatMessageAuthorStyle }, message.senderDisplayName), body: {
                    className: chatItemMessageContainerClassName,
                    style: Object.assign({}, createStyleFromV8Style(messageContainerStyle))
                }, "data-testid": "chat-composite-message", timestamp: React.createElement(Text, { className: props.message.status === 'failed' ? chatMessageDateFailedStyle(theme) : chatMessageDateStyle(theme), "data-testid": ids.messageTimestamp }, formattedTimestamp), details: getMessageDetails() }, getContent())));
    return chatMessage;
};
/** @private */
export const ChatMessageComponentAsMessageBubble = React.memo(MessageBubble);
//# sourceMappingURL=ChatMessageComponentAsMessageBubble.js.map