import { Translator } from "@/app/i18n/api";
import { Message, Speaker } from "@/app/lib/conversation";
import { useState } from "react";
import { StyleSheet, Text } from "react-native";
import { SafeAreaView } from "react-native-safe-area-context";

type MessageProps = {
    message: Message;
}

const MessageBubble = (props: MessageProps) => {
    const [text, setText] = useState(props.message.text);
    const [translatedText, setTranslatedText] = useState(props.message.text);
    const [isTranslating, setIsTranslating] = useState<boolean>(false);

    props.message.onTextUpdate = (message: Message) => {
        setText(message.text);
    }

    props.message.onTextDone = async (message: Message) => {
        setIsTranslating(true);
        await props.message.translate()
    }

    props.message.onTranslationDone = (message: Message) => {
        if (!message.translation) throw new Error("Missing translation");
        setTranslatedText(message.translation);
        setIsTranslating(false);
    }

    const spId = props.message.speaker.id

    return (
        <SafeAreaView>
            {text && (
                <Text>{text}</Text>
            )}
            {translatedText &&
                <Text>{translatedText}</Text>
            }
        </SafeAreaView>
    )
}

// const bubbleStyle = StyleSheet.create({
//     host: {

//     },
//     guest: {

//     },
// })

// const textStyles = StyleSheet.create({
//     native: {

//     },
//     translation: {

//     },
// });

export default MessageBubble;