// Copyright (c) Microsoft Corporation.
// Licensed under the MIT License.
import React, { useMemo } from 'react';
import { DefaultSystemMessage } from './DefaultSystemMessage';
import { FluentChatMyMessageComponent } from './MyMessageComponents/FluentChatMyMessageComponent';
import { FluentChatMessageComponent } from './MessageComponents/FluentChatMessageComponent';
/**
 * The wrapper component to display different types of chat message.
 *
 * @private
 */
export const ChatMessageComponentWrapper = (props) => {
    var _a;
    const { message, styles, onRenderMessage, key: messageKey } = props;
    const systemMessageStyle = useMemo(() => {
        return {
            paddingTop: '0.5rem'
        };
    }, []);
    const customMessageStyle = useMemo(() => {
        return {
            paddingTop: '1rem',
            paddingBottom: '0.25rem'
        };
    }, []);
    switch (message.messageType) {
        case 'chat':
            {
                const myChatMessageStyle = message.status === 'failed' ? (_a = styles === null || styles === void 0 ? void 0 : styles.failedMyChatMessageContainer) !== null && _a !== void 0 ? _a : styles === null || styles === void 0 ? void 0 : styles.myChatMessageContainer : styles === null || styles === void 0 ? void 0 : styles.myChatMessageContainer;
                const chatMessageStyle = styles === null || styles === void 0 ? void 0 : styles.chatMessageContainer;
                const messageContainerStyle = message.mine ? myChatMessageStyle : chatMessageStyle;
                return fluentChatComponent(Object.assign(Object.assign({}, props), { message: message, messageContainerStyle: messageContainerStyle }));
            }
        case 'system':
            {
                const messageContainerStyle = styles === null || styles === void 0 ? void 0 : styles.systemMessageContainer;
                const systemMessageComponent = onRenderMessage === undefined ? React.createElement(DefaultSystemMessage, Object.assign({}, props)) : onRenderMessage(Object.assign(Object.assign({}, props), { messageContainerStyle }), props => React.createElement(DefaultSystemMessage, Object.assign({}, props)));
                return React.createElement("div", { key: messageKey, style: systemMessageStyle }, systemMessageComponent);
            }
        default:
            {
                // We do not handle custom type message by default, users can handle custom type by using onRenderMessage function.
                const customMessageComponent = onRenderMessage === undefined ? React.createElement(React.Fragment, null) : onRenderMessage(Object.assign({}, props));
                return React.createElement("div", { key: messageKey, style: customMessageStyle }, customMessageComponent);
            }
    }
};
const fluentChatComponent = (props) => {
    if (props.message.mine === true) {
        return React.createElement(FluentChatMyMessageComponent, Object.assign({}, props));
    }
    else {
        return React.createElement(FluentChatMessageComponent, Object.assign({}, props));
    }
};
//# sourceMappingURL=ChatMessageComponentWrapper.js.map