import { useNavigation } from '@react-navigation/native';
import { useState } from "react";
import { Image, Text, View, StyleSheet, Button, Pressable } from "react-native";
import { LanguageServer, Translator, language_matrix_entry } from "./i18n/api";
import { Conversation } from "./lib/conversation";
import { LanguageSelection } from "@/components/LanguageSelection";

function LogoTitle() {
  return (
    <Image
      style={styles.image}
      source={{ uri: "https://reactnative.dev/img/tiny_logo.png" }}
    />
  );
}

export default function Home() {
  const navigation = useNavigation();

  const [lang, setLang] = useState<language_matrix_entry | undefined>();
  const [conversation, setConversation] = useState<Conversation | undefined>();
  const [setShowSettings, showSettings] = useState<boolean>(false);

  async function onLangSelected(lang: language_matrix_entry) {
    console.log("Language %s selected", lang.code);
    setLang(lang);
    if (!lang?.code) return;
    const langServer = await LanguageServer.getDefault();
    const conversation = new Conversation(
      new Translator("en", lang.code, langServer),
      { id: "host", language: "en" },
      { id: "guest", language: lang.code }
    );
    navigation.navigate("Conversation", {
      conversation,
    });
  }

  function onGoBack() {
    setConversation(undefined);
  }

  return (
    <View style={styles.container}>
      <LanguageSelection onLangSelected={onLangSelected} />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "flex-start",
  },
  image: {
    width: 50,
    height: 50,
  },
});