import { CachedTranslator, Translator, language_matrix, language_matrix_entry } from "@/app/i18n/api";
import { LIBRETRANSLATE_BASE_URL } from "@/constants/api";
import { useEffect, useState } from "react";
import ISpeakButton from "./ui/ISpeakButton";
import { LANG_FLAGS } from "@/app/i18n/lang";
import { ScrollView, StyleSheet, Text, View } from "react-native";
import { SafeAreaProvider, SafeAreaView } from "react-native-safe-area-context";
import { Conversation, Speaker } from "@/app/lib/conversation";

async function beginConversation(language : language_matrix_entry) {
  const translator = new Translator(language.code)
  const s1 : Speaker = {language : "en", id: "s1"};
  const s2 : Speaker = {id: "s2", language: language.code}
  const conversation = new Conversation(translator, s1, s2);
}


export function LanguageSelection(props : {
    translator? : Translator
}) {
    const [languages, setLanguages] = useState<language_matrix|undefined>();
    const [languagesLoaded, setLanguagesLoaded] = useState<boolean>(false);

    const translator = props.translator || new CachedTranslator("en")

    useEffect(() => {
        const fetchData = async () => {
          try {
            // Replace with your actual async data fetching logic
            const languages = await translator.fetchLanguages();
            setLanguages(languages);
            setLanguagesLoaded(true);
          } catch (error) {
            console.error('Error fetching data:', error);
          }
        };
    
        fetchData();
      }, []);

    return (
        <ScrollView >
            <SafeAreaProvider >
                <SafeAreaView>
            {(languages && languagesLoaded) ? Object.entries(languages).filter((l) => (LANG_FLAGS as any)[l[0]] !== undefined).map(
                    ([lang, lang_entry]) => {
                        return (
                            <View style={styles.column}>
                              <ISpeakButton language={lang_entry} key={lang_entry.code} onLangSelected={beginConversation} />
                            </View>
                        );
                    }
                ) : <Text>Waiting...</Text>
            }
            </SafeAreaView>
            </SafeAreaProvider>
    </ScrollView>
)
}

const styles = StyleSheet.create({
    column: {
      flex: 1,
      flexDirection: 'row',
      flexWrap: 'wrap',
      flexBasis: "auto",
      flexGrow: 1,
      padding: 8,
    },
})