import React, { Dispatch } from "react";
import { render, screen, fireEvent, act } from "@testing-library/react-native";
import SettingsComponent from "@/components/Settings";
import { Settings } from "@/app/lib/settings";
import { getDb } from "@/app/lib/db";
import { language_matrix } from "@/app/i18n/api";

const RENDER_TIME = 1000;

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) => {
            return "Hola, como estas?"
        })
    }
    return {
        LanguageServer,
        Translator,
    }
})

jest.mock("@/app/lib/db", () => {
    return {
        getDb: jest.fn(() => {
            return {
                runAsync: jest.fn((statement : string, value : string) => {}),
                getFirstAsync: jest.fn((statement : string, value : string) => {
                    return []
                }),
            }
        })
    }
})

jest.mock("@/app/lib/settings", () => {
    const originalModule = jest.requireActual('@/app/lib/settings');
    class MockSettings {
        public constructor(public db = {}) {}
        public setHostLanguage = jest.fn((val : string) => {

        })
        public setLibretranslateBaseUrl(val : string) {

        }
        getHostLanguage = jest.fn(() => {
            return "en"
        })
        getLibretranslateBaseUrl = jest.fn(() => {
            return "http://localhost:5004"
        });
    }
    return {
        ...originalModule,
        Settings: MockSettings
    }
})

describe("SettingsComponent", () => {
    beforeEach(async() => {
        const settings = new Settings(await getDb());
        await settings.setHostLanguage("en");
        await settings.setLibretranslateBaseUrl("https://example.com");
    })

    beforeAll(() => {
        jest.useFakeTimers();
    })

    afterAll(() => {
        jest.useRealTimers()
    })

    test("renders correctly with initial settings", async () => {
        render(<SettingsComponent />);
        jest.advanceTimersByTime(RENDER_TIME);
        screen.debug();

        // Wait for the component to fetch and display the initial settings
        await screen.findByText(/Host Language:/i);
        await screen.findByText(/LibreTranslate Base URL:/i);

        // expect(screen.getByDisplayValue("English")).toBeTruthy();
        expect(screen.getByAccessibilityHint("libretranslate base url")).toBeTruthy();
    });

    test("updates host language setting when input changes", async () => {
        render(<SettingsComponent />);


        // Wait for the component to fetch and display the initial settings
        await screen.findByText(/Host Language:/i);
        await screen.findByText(/LibreTranslate Base URL:/i);

        // Change the host language input value
        const picker = screen.getByAccessibilityHint("language");
        fireEvent(picker, "onvalueChange", "es");
        expect(picker.props.selectedIndex).toStrictEqual(0); 
    });

    test("updates LibreTranslate base URL setting when input changes", async () => {
        render(<SettingsComponent />);

        jest.advanceTimersByTime(RENDER_TIME)
        screen.debug();

        // Wait for the component to fetch and display the initial settings
        await screen.findByText(/Host Language:/i);
        await screen.findByText(/LibreTranslate Base URL:/i);

        // Change the LibreTranslate base URL input value
        fireEvent.changeText(screen.getByAccessibilityHint("libretranslate base url"), "http://new-example.com");
        jest.advanceTimersByTime(RENDER_TIME);

        expect(screen.getByAccessibilityHint("libretranslate base url")).toBeTruthy();
    });
});