import { LanguageSelection } from "@/components/LanguageSelection";
import { Link, Stack } from "expo-router";
import { useState } from "react";
import { Image, Text, View, StyleSheet, Button, Pressable } from "react-native";
import { Translator, language_matrix_entry } from "./i18n/api";
import ConversationThread from "@/components/ConversationThread";
import { Conversation } from "./lib/conversation";

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

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

  function onLangSelected(lang: language_matrix_entry | undefined) {
    console.log("Language %s selected", lang?.code);
    setLang(lang);
    if (!lang?.code) return;
    setConversation(
      new Conversation(
        new Translator("en", lang.code),
        { id: "host", language: "en" },
        { id: "guest", language: lang.code }
      )
    );
  }

  function onGoBack() {
    setConversation(undefined);
  }

  return (
    <View style={styles.container}>
      <Stack.Screen name="index" />
      <Stack.Screen name="settings" />
      <Stack.Screen name="conversation" />
    </View>
  );
}

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