// Copyright (c) Microsoft Corporation.
// Licensed under the MIT License.
import { Persona, Stack, PersonaSize, Text, useTheme } from '@fluentui/react';
import React from 'react';
import { captionClassName, captionsContentContainerClassName, displayNameClassName, displayNameContainerClassName, iconClassName, isTypingClassName, rttContainerClassName } from './styles/Captions.style';
import { useLocale } from '../localization';
/**
 * @public
 * A component for displaying a single line of RealTimeText
 */
export const RealTimeText = (props) => {
    const { displayName, userId, message, onRenderAvatar, isTyping } = props;
    const theme = useTheme();
    const localeStrings = useLocale().strings.realTimeText;
    const strings = Object.assign(Object.assign({}, localeStrings), props.strings);
    const personaOptions = {
        hidePersonaDetails: true,
        size: PersonaSize.size32,
        text: displayName,
        showOverflowTooltip: false,
        imageShouldStartVisible: true,
        initialsTextColor: 'white',
        styles: {
            root: {
                margin: '0.25rem'
            }
        }
    };
    const userIcon = onRenderAvatar ? onRenderAvatar(userId !== null && userId !== void 0 ? userId : '', personaOptions) : React.createElement(Persona, Object.assign({}, personaOptions));
    return React.createElement(Stack, { horizontal: true, verticalAlign: "start", horizontalAlign: "start", className: rttContainerClassName(theme, isTyping !== null && isTyping !== void 0 ? isTyping : false) },
        React.createElement(Stack.Item, { className: iconClassName }, userIcon),
        React.createElement(Stack, { verticalAlign: "start", className: captionsContentContainerClassName },
            React.createElement(Stack, { className: displayNameContainerClassName, horizontal: true },
                React.createElement(Text, { className: displayNameClassName }, displayName),
                isTyping && React.createElement(Text, { className: isTypingClassName(theme) }, strings === null || strings === void 0 ? void 0 : strings.isTypingText)),
            React.createElement(Stack.Item, { className: captionClassName, dir: "auto" }, message)));
};
//# sourceMappingURL=RealTimeText.js.map