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


jest.mock("@/app/i18n/api", () => {
    class LanguageServer {
        fetchLanguages = () => {
            return {
                "en": {
                    code: "en",
                    name: "English",
                    targets: [
                        "fr",
                        "es"
                    ]
                },
                "fr": {
                    code: "fr",
                    name: "French",
                    targets: [
                        "en",
                        "es"
                    ]
                },
                "es": {
                    code: "es",
                    name: "Spanish",
                    targets: [
                        "en",
                        "fr"
                    ]
                },
            } as language_matrix
        }
    }
    class Translator {
        translate = jest.fn((text : string, target : string) => {
            if (text.match(/Hello, how are you\?/i)) {
                return "Hola, ¿cómo estás?"
            }
            return "??? Huh ???"
        })
    }
    return {
        LanguageServer,
        Translator,
    }
})

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

    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(screen.getByAccessibilityHint("translation")).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(screen.getByText(text)).toBeOnTheScreen();
        // expect(screen.getByText(translatedText)).not.toBeOnTheScreen();
        // await conversation.translateLast();
        // expect(await screen.findByText(text)).toBeOnTheScreen();
        // expect(await screen.findByText(translatedText)).toBeOnTheScreen();
    });
});