// Copyright (c) Microsoft Corporation.
// Licensed under the MIT License.
import { FontIcon, mergeStyles, Stack, Text } from '@fluentui/react';
import React, { useEffect, useState } from 'react';
import { systemMessageIconStyle } from './styles/SystemMessage.styles';
import LiveMessage from './Announcer/LiveMessage';
/**
 * @private
 */
export const SystemMessage = (props) => {
    const { iconName, content } = props;
    const Icon = React.createElement(FontIcon, { iconName: iconName, className: mergeStyles(systemMessageIconStyle) });
    const [liveMessage, setLiveMessage] = useState('');
    useEffect(() => {
        // Timeout is needed to handle situation when the same user joins and leaves a chat a few times in a row, otherwise Narrator won't repeat the system message text.
        // Because delay value is not provided, setMessage function will be executed asynchronously in the next event cycle
        setTimeout(() => {
            setLiveMessage(content);
        });
    }, [content]);
    return React.createElement(React.Fragment, null,
        React.createElement(LiveMessage, { message: liveMessage, ariaLive: "polite", clearOnUnmount: true }),
        React.createElement(Stack, { horizontal: true, className: mergeStyles(props === null || props === void 0 ? void 0 : props.containerStyle), role: "status", "aria-label": content, tabIndex: 0 },
            Icon,
            React.createElement(Text, { style: {
                    wordBreak: 'break-word'
                }, variant: 'small' }, content)));
};
//# sourceMappingURL=SystemMessage.js.map