// 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-native";
import CountryFlag from "react-native-country-flag";
import { chooseCountry } from "@/app/i18n/countries";

type ISpeakButtonProps = {
  language: language_matrix_entry;
  translator?: Translator;
  onLangSelected?: (lang: language_matrix_entry) => any | Promise<any>;
};

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, setTranslator] = useState<Translator | undefined>(
    undefined
  );

  useEffect(() => {
    (async function () {
      const tr = props.translator || (await CachedTranslator.getDefault());
      if (!tr) {
        console.error("Failed to construct cachedTranslator");
      }
      setTranslator(tr);
      try {
        // Replace with your actual async data fetching logic
        const title2 = await iSpeakTr(tr, props.language);
        setTitle(title2);
      } catch (error) {
        console.error("Error fetching data from %s: %s", tr.languageServer.baseUrl, error);
      } finally {
        setTitleLoaded(true);
      }
    })();
  }, []);

  const countries =
    // @ts-ignore
    DEFAULT_FLAGS[props.language.code] || chooseCountry(props.language.code);

  return title ? (
    <TouchableOpacity
      style={styles.button}
      onPress={() =>
        props.onLangSelected && props.onLangSelected(props.language)
      }
    >
      <View>
        <View style={styles.flag}>
          {countries &&
            countries.map((c) => {
              return (
                <CountryFlag isoCode={c} size={25} key={c} />
              );
            })}
        </View>
        <View>
          <Text style={styles.iSpeakText}>{title}</Text>
        </View>
      </View>
    </TouchableOpacity>
  ) : (
    <Text>Loading...</Text>
  );
};

const styles = StyleSheet.create({
  button: {
    borderRadius: 10,
    borderColor: "white",
    borderWidth: 1,
    borderStyle: "solid",
    height: 110,
    width: 170,
    margin: 10,
  },
  flag: {},
  iSpeak: {
    textAlign: "center",
  },
  iSpeakText: {
    textAlign: "center",
  },
});

export default ISpeakButton;