import React, { useContext } from "react";
import { View } from "react-native";
import { CometChatContext } from "../../CometChatContext";
import { MessageBubbleStyle } from "./MessageBubbleStyle";
import { memo } from "react";
export const CometChatMessageBubble = memo(({ HeaderView, StatusInfoView, ReplyView, ContentView, FooterView, LeadingView, BottomView, ThreadView, alignment, id, style }) => {
    const { theme } = useContext(CometChatContext);
    const _style = new MessageBubbleStyle({
        backgroundColor: theme?.palette.getAccent100(),
        ...style
    });
    const { backgroundColor, border, borderRadius, height, width } = _style;
    return (<View key={id} style={{
            width: "100%",
            alignItems: alignment == "right" ?
                "flex-end" :
                alignment == "left" ?
                    "flex-start" :
                    alignment
        }}>
            <View style={{
            height, flexDirection: "row",
        }}>
                {LeadingView && <LeadingView />}
                <View style={{ marginStart: 4, width, maxWidth: "80%" }}>
                    {HeaderView && <HeaderView />}
                    {ReplyView && <ReplyView />}
                    <View style={{ ...border, borderRadius, backgroundColor }}>
                        {ContentView && <ContentView />}
                        {StatusInfoView && <StatusInfoView />}
                        {BottomView && <BottomView />}
                    </View>
                    {FooterView && <FooterView />}
                    {ThreadView && <ThreadView />}
                </View>
            </View>

        </View>);
});
CometChatMessageBubble.defaultProps = {
    alignment: "left"
};
//# sourceMappingURL=CometChatMessageBubble.js.map