import { LanguageSelection } from '@/components/LanguageSelection';
import { useState } from 'react';
import { Button, Text, View } from 'react-native';
import { Image, StyleSheet, Platform } from 'react-native';
import { Conversation, Speaker } from '../lib/conversation';
import { language_matrix_entry, Translator } from '../i18n/api';
import ConversationThread from '@/components/ConversationThread';
import { NavigationContainerProps, NavigationProp, ParamListBase } from '@react-navigation/native';

export default function HomeScreen({navigation} : {navigation: NavigationProp<ParamListBase>}) {

  const [language, setLanguage] = useState<language_matrix_entry | undefined>()
  const [conversation, setConversation] = useState<Conversation | undefined>();

  return (
    conversation ? <ConversationThread conversation={conversation} /> :
      <View>
        <Button
          title="Settings"
          onPress={() =>
            navigation.navigate('Settings')
          }
        />
      </View>
  );
}

const styles = StyleSheet.create({
  titleContainer: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: 8,
  },
  stepContainer: {
    gap: 8,
    marginBottom: 8,
  },
  reactLogo: {
    height: 178,
    width: 290,
    bottom: 0,
    left: 0,
    position: 'absolute',
  },
});