import AsyncStorage from '@react-native-async-storage/async-storage';
import { CachedTranslator, Translator, language_matrix_entry } from "@/app/i18n/api"
import { longLang } from "@/app/i18n/lang"
import React, { useEffect, useRef, useState } from "react"
import { Button, Image, ImageBackground, Pressable, StyleSheet, TouchableOpacity, View } from "react-native"
import { Text } from '@react-navigation/elements';
import CountryFlag from "react-native-country-flag";
import { chooseCountry } from '@/app/i18n/countries';

type ISpeakButtonProps = {
    language: language_matrix_entry,
    translator?: Translator,
}

function iSpeak(language : language_matrix_entry) {
    return `I speak ${language.name}.`
}

async function iSpeakTr(translator : CachedTranslator, targetLang : language_matrix_entry) {
    const sourceStr = iSpeak(targetLang)
    return await translator.translate(sourceStr, targetLang.code);
}

const DEFAULT_FLAGS = {
    "en": ["us", "gb"],
    // "sq": ["al"],
    "ar": ["ae"],
    "es": ["es"],
    "pt": ["pt"],
    "ru": ["ru"],
    "it": ["it"],
    "ir": ["ie"],
    "sk": ["sk"],
    "ro": ["ro"],
    "ja": ["jp"],
    "ko": ["kp", "kr"],
    "el": ["gr"],
    "fr": ["fr"],
    "de": ["de"],
    "nl": ["nl"],
    "cz": ["cz"],
    "uk": ["ua"],
    "he": ["il"],
    "hi": ["in"],
    "gl": ["es"],
    "fa": ["ir"],
    "ur": ["pk"],
    "ga": ["ie"],
    "eo": ["es"]
}

const ISpeakButton = (props : ISpeakButtonProps) => {

    const [title, setTitle] = useState<string | undefined>();
    const [titleLoaded, setTitleLoaded] = useState<boolean>(false);
    const translator = props.translator || new CachedTranslator("en");

    useEffect(() => {
        const fetchData = async () => {
          try {
            // Replace with your actual async data fetching logic
            const title = await iSpeakTr(translator, props.language);
            setTitle(title);
        } catch (error) {
            console.error('Error fetching data:', error);
        } finally {
            setTitleLoaded(true);
          }
        };
    
        fetchData();
      }, []);
    
    const countries = DEFAULT_FLAGS[props.language.code] || chooseCountry(props.language.code);
    
    return (
        title ? (
            <TouchableOpacity style={styles.button}>
                <View>
                    {countries &&
                        countries.map( c => {
                            return <CountryFlag isoCode={c} size={25} key={c}/> }
                        )
                    }
                    <Text style={{textAlign: "center", verticalAlign: "bottom"}}>{ title } { props.language.name } { props.language.code }</Text>
                </View>
            </TouchableOpacity>
        ) : (
            <Text>Loading...</Text>
        )
    )

}

const styles = StyleSheet.create({
    button: {
        // backgroundColor: "blue",
        width: "20%",
        // height: "20%",
        margin: 5,
        borderRadius: 10,
        borderColor: "white",
        borderWidth: 1,
        borderStyle: "solid",
    }
})

export default ISpeakButton;