import {MyScreenContainer} from '@components/MyScreenContainer';
import { Text } from '@gluestack-ui/themed';
import {
  createNativeStackNavigator,
  NativeStackNavigationProp,
} from '@react-navigation/native-stack';
import {RootState} from '@redux/store';
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.navigation.home.chats,
  );
  const currentTheme = useSelector(
    (state: RootState) => state.nonSaveVariables.theme.colors,
  );

  const headerStyle = {
    backgroundColor: currentTheme.backgroundDark400,
  };

  return (
    <ChatsStack.Navigator initialRouteName="Overview">
      <ChatsStack.Screen
        name="Overview"
        options={{
          title: lang.tabName,
          headerShown: true,
          headerShadowVisible: false,
          headerStyle: headerStyle,
        }}
        component={ChatsScreen}
      />
    </ChatsStack.Navigator>
  );
}

function ChatsScreen() {
  return (
    <MyScreenContainer>
      <Text>Part of the next phase</Text>
    </MyScreenContainer>
  );
}

export default ChatsTab;
