import {Center} from '@gluestack-ui/themed/build/components/Center';
import {useNavigation} from '@react-navigation/native';
import {
  createNativeStackNavigator,
  NativeStackNavigationProp,
} from '@react-navigation/native-stack';
import {RootState} from '@redux/store';
import {Text} from 'react-native';
import {useSelector} from 'react-redux';

export const ChatsTabName = 'Chats';

export type ChatsStackNavigatorParamList = {
  Overview: undefined;
  Chat: undefined;
};

const ChatsStack = createNativeStackNavigator<ChatsStackNavigatorParamList>();

export type ChatsScreenNavigationProp =
  NativeStackNavigationProp<ChatsStackNavigatorParamList>;

function ChatsTab() {
  const lang = useSelector((state: RootState) => state.appVariables.lang);

  //const navigation = useNavigation<ChatsScreenNavigationProp>();

  return (
    <ChatsStack.Navigator initialRouteName="Overview">
      <ChatsStack.Screen
        name="Overview"
        options={{
          title: lang.navigation.home.chat,
          headerShown: true,
        }}
        component={ChatsScreen}
      />
    </ChatsStack.Navigator>
  );
}

function ChatsScreen() {
  return (
    <Center>
      <Text>Chats</Text>
    </Center>
  );
}

export default ChatsTab;
