// Import necessary packages
import React, { useState, useEffect } from "react";
import { View, Text, TextInput, StyleSheet } from "react-native"; // Add Picker import
import { getDb } from "@/app/lib/db";
import { Settings } from "@/app/lib/settings";
import { LanguageServer } from "@/app/i18n/api";
import {Picker} from "@react-native-picker/picker"
import { longLang } from "@/app/i18n/lang";
import { LIBRETRANSLATE_BASE_URL } from "@/constants/api";

type Language = {
    code: string;
    name: string;
};

type LanguageMatrix = {
    [key: string]: Language;
};

const SettingsComponent: React.FC = () => {
    const [hostLanguage, setHostLanguage] = useState<string | null>(null);
    const [libretranslateBaseUrl, setLibretranslateBaseUrl] = useState<string | null>(null);
    const [languages, setLanguages] = useState<undefined|LanguageMatrix>();
    const [isLoaded, setIsLoaded] = useState<boolean>(false);

    useEffect(() => {
        (async () => {
            // Fetch the database connection
            const db = await getDb();
            const settings = new Settings(db);
            
            // Get the current settings values
            const hostLang = await settings.getHostLanguage();
            const libretranslateUrl = await settings.getLibretranslateBaseUrl();
            const langServer = new LanguageServer(libretranslateBaseUrl || LIBRETRANSLATE_BASE_URL);

            // Fetch languages from API
            const langData = await langServer.fetchLanguages();
            setLanguages(langData);
            setHostLanguage(hostLang || "en");
            setLibretranslateBaseUrl(libretranslateUrl);
            setIsLoaded(true);
        })();
    }, []);

    const handleHostLanguageChange = async (value: string) => {
        setHostLanguage(value);

        // Fetch the database connection
        const db = await getDb();
        const settings = new Settings(db);

        // Save the updated setting value
        await settings.setHostLanguage(value);
    };

    const handleLibretranslateBaseUrlChange = async (value: string) => {
        setLibretranslateBaseUrl(value);

        // Fetch the database connection
        const db = await getDb();
        const settings = new Settings(db);

        // Save the updated setting value
        await settings.setLibretranslateBaseUrl(value);
    };

    return (
        isLoaded ? <View style={styles.container}>
            <Text style={styles.label}>Host Language:</Text>
            <Picker
                selectedValue={hostLanguage || ""}
                style={{ height: 50, width: "100%" }}
                onValueChange={handleHostLanguageChange}
                accessibilityHint="language"
            >
                {languages && Object.keys(languages).map((langCode) => (
                    <Picker.Item key={langCode} label={longLang(langCode)} value={langCode} />
                ))}
            </Picker>

            <Text style={styles.label}>LibreTranslate Base URL:</Text>
            <TextInput
                style={styles.input}
                value={libretranslateBaseUrl || ""}
                onChangeText={handleLibretranslateBaseUrlChange}
                accessibilityHint="libretranslate base url"
            />
        </View> : <View><Text>Loading ...</Text></View>
    );
};

// Create styles for the component
const styles = StyleSheet.create({
    container: {
        flex: 1,
        padding: 20,
    },
    label: {
        fontSize: 16,
        marginBottom: 8,
    },
    input: {
        height: 40,
        borderColor: "gray",
        borderWidth: 1,
        marginBottom: 20,
        paddingHorizontal: 8,
    },
});

export default SettingsComponent;