import React, { act } from 'react';
import { render, screen } from '@testing-library/react-native'
import MessageBubble from '@/components/ui/MessageBubble';
import { Conversation, Speaker } from '@/app/lib/conversation';
import {Translator} from '@/app/i18n/api';
import { View } from 'react-native';

describe('Message Component', () => {
    const translator = new Translator('en', 'es');

    const host : Speaker = {id : "host", language : "en"}
    const guest : Speaker = {id : "guest", language: "es"}

    let conversation : Conversation;

    beforeEach(() => {
        jest.clearAllMocks();
        conversation = new Conversation(translator, host, guest);
    });

    it('renders the message text correctly', async () => {
        conversation.addMessage(host, "Hello, World!");
        const message = conversation[0];
        render(<View></View>);
        // render(<MessageBubble message={message} />);
        expect(await screen.findByText(message.text as string)).toBeOnTheScreen();
    });

    it('translates the message when target language is provided', async () => {
        const translatedText = 'Hola, ¿cómo estás?';
        conversation.addMessage(host, "Hello, how are you?");
        await conversation.translateLast();

        render(<MessageBubble message={conversation[0]} />);
        expect(await screen.findByText(translatedText)).toBeOnTheScreen();
    });

    it('widget still renders pre-translation', async () => {
        const text = "Hello, how are you?"
        const translatedText = 'Hola, ¿cómo estás?';
        conversation.addMessage(host, text);
        render(<MessageBubble message={conversation[0]} />);
        expect(await screen.findByText(text)).toBeOnTheScreen();
        expect(await screen.findByText(translatedText)).not.toBeOnTheScreen();
        await act(async () => {
            await conversation.translateLast();
        });
        expect(await screen.findByText(text)).toBeOnTheScreen();
        expect(await screen.findByText(translatedText)).toBeOnTheScreen();
    });
});