import {ListChats} from '@caj/components/chat/listChats';
import NotLoggedIn from '@caj/components/NotLoggedIn';
import {defaultHeaderStyle} from '@caj/configs/colors';
import {RootStackNavigatorParamList} from '@caj/Navigation';
import {RootState} from '@caj/redux/store';
import {
  createNativeStackNavigator,
  NativeStackNavigationProp,
} from '@react-navigation/native-stack';
import {Center, Text} from 'native-base';
import {useSelector} from 'react-redux';

export const ChatTabName = 'Chat';

export type ChatStackNavigatorParamList = {
  Overview: undefined;
};

const ChatStack = createNativeStackNavigator<ChatStackNavigatorParamList>();

export type ChatScreenNavigationProp =
  NativeStackNavigationProp<ChatStackNavigatorParamList>;

function ChatTab() {
  const lang = useSelector((state: RootState) => state.appVariables.lang);
  const theme = useSelector(
    (state: RootState) => state.appVariables.preferences.theme,
  );

  return (
    <ChatStack.Navigator>
      <ChatStack.Screen
        name="Overview"
        options={{
          title: lang.navigation.home.chat,
          headerShown: true,
          ...defaultHeaderStyle(theme),
        }}
        component={ChatScreen}
      />
    </ChatStack.Navigator>
  );
}

function ChatScreen() {
  return (
    <Center>
      <ListChats />
      <NotLoggedIn />
    </Center>
  );
}

export default ChatTab;
