import { StyleSheet, Text, View } from 'react-native';
import React, { useContext, useEffect, useState } from 'react';
import { CometChatContext, } from '../../shared/CometChatContext';
import { CometChatTextBubble, TextBubbleStyle, } from "../../shared/views";
export const MessageTranslationBubble = (props) => {
    const { theme } = useContext(CometChatContext);
    const { translatedText, text, style = {}, textContainerStyle, alignment, textFormatters, } = props;
    const [formattedText, setFormattedText] = useState();
    const [formattedTranslatedText, setFormattedTranslatedText] = useState();
    useEffect(() => {
        let _formattedText = text;
        let _formattedTranslatedText = text;
        if (textFormatters && textFormatters.length) {
            if (textFormatters) {
                for (let i = 0; i < textFormatters.length; i++) {
                    _formattedText = textFormatters[i].getFormattedText(_formattedText);
                }
            }
        }
        if (textFormatters && textFormatters.length) {
            if (textFormatters) {
                for (let i = 0; i < textFormatters.length; i++) {
                    _formattedTranslatedText = textFormatters[i].getFormattedText(_formattedTranslatedText);
                }
            }
        }
        setFormattedText(_formattedText);
        setFormattedTranslatedText(_formattedTranslatedText);
    }, []);
    const _style = {
        ...new TextBubbleStyle({}),
        backgroundColor: alignment == 'left'
            ? theme?.palette?.getAccent50()
            : theme?.palette?.getPrimary(),
        textFont: theme?.typography.body,
        textColor: alignment == 'right'
            ? theme?.palette.getSecondary()
            : theme?.palette?.getAccent(),
        borderRadius: 8,
        translatedTextStyle: {
            color: alignment == 'right'
                ? theme?.palette.getSecondary()
                : theme?.palette?.getAccent(),
            ...(theme?.typography?.subtitle2 ?? {
                fontSize: 13,
                fontWeight: '400',
            }),
        },
        translatedMsgStyle: {
            color: alignment == 'right'
                ? theme?.palette.getSecondary()
                : theme?.palette?.getAccent(),
            ...(theme?.typography?.caption2 ?? {
                fontSize: 11,
                fontWeight: '400',
            }),
        },
        ...style,
    };
    const { backgroundColor, border, borderRadius, textColor, textFont, height, width, } = _style;
    if (translatedText && translatedText !== '') {
        return (<View style={[
                {
                    backgroundColor,
                    borderRadius,
                    height,
                    width,
                    overflow: 'hidden',
                    padding: 8,
                },
                border,
                textContainerStyle,
            ]}>
        <Text style={[{ color: textColor }, textFont]}>{formattedText}</Text>
        <Text style={[styles.textsPadding, style.translatedTextStyle]}>
          {formattedTranslatedText}
        </Text>
        <Text style={[styles.textsPadding, style.translatedMsgStyle]}>
          Translated Message
        </Text>
      </View>);
    }
    return (<CometChatTextBubble text={text} textContainerStyle={textContainerStyle} style={_style}/>);
};
const styles = StyleSheet.create({
    textsPadding: {
        paddingVertical: 5,
    },
});
//# sourceMappingURL=MessageTranslationBubble.js.map