import * as React from 'react';
import { NavigationContainer } from '@react-navigation/native';
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 { useRouter } from 'expo-router';
import { Conversation } from '@/app/lib/conversation';
import { Settings } from '@/app/lib/settings';
import { RootStackParamList } from '@/navigation.types';

const Stack = createNativeStackNavigator();

export default function TTNavStack() {


  async function onLangSelected(lang: language_matrix_entry) {
    const nav = useNavigation<NativeStackNavigationProp<RootStackParamList, 'ConversationThread'>>();
    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("Conversation", { conversation, })
  }

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