import { LanguageSelection } from "@/components/LanguageSelection";
import { Link, Stack } from "expo-router";
import { useState } from "react";
import { Image, Text, View, StyleSheet } 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>();

  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 }
      )
    );
  }

  return (
    <View style={styles.container}>
      <Stack.Screen
        options={{
          title: "My home",
          headerStyle: { backgroundColor: "#f4511e" },
          headerTintColor: "#fff",
          headerTitleStyle: {
            fontWeight: "bold",
          },
        }}
      />
      <Text>Home Screen</Text>
      {conversation ? (
        <ConversationThread conversation={conversation} />
      ) : (
        <LanguageSelection onLangSelected={onLangSelected} />
      )}
      )
    </View>
  );
}

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