import * as React from "react";
import SettingsComponent from "@/components/Settings";
import { LanguageSelection } from "@/components/LanguageSelection";
import {
  createNativeStackNavigator,
  NativeStackNavigationProp,
} from "@react-navigation/native-stack";
import { useNavigation } from "@react-navigation/native";
import ConversationThread from "@/components/ConversationThread";
import { language_matrix_entry, Translator } from "@/app/i18n/api";
import { Conversation } from "@/app/lib/conversation";
import { Settings } from "@/app/lib/settings";
import { RootStackParamList } from "@/navigation.types";

const Stack = createNativeStackNavigator();

export default function TTNavStack() {
  const nav = useNavigation<NativeStackNavigationProp<RootStackParamList, "Conversation">>()
  
  async function onLangSelected(lang: language_matrix_entry) {
    const settings = await Settings.getDefault();
    const hostLanguage = await settings.getHostLanguage();
    const conversation = new Conversation(
      await Translator.getDefault(lang.code),
      { id: "host", language: hostLanguage },
      { id: "guest", language: lang.code }
    );
    nav.navigate("ConversationThread", { conversation });
  }

  return (
    <Stack.Navigator initialRouteName="LanguageSelection">
      <Stack.Screen name="LanguageSelection">
        {(props) => (
          <LanguageSelection {...props} onLangSelected={onLangSelected} />
        )}
      </Stack.Screen>
      <Stack.Screen name="ConversationThread" component={ConversationThread} />
      <Stack.Screen name="Settings" component={SettingsComponent} />
    </Stack.Navigator>
  );
}