Untitled

/* eslint-disable react/no-unstable-nested-components */
import React, { useEffect, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import NetInfo from '@react-native-community/netinfo';

import { createStackNavigator } from '@react-navigation/stack';
import { Image, Text, TouchableOpacity, View } from 'react-native-ui-lib';
import Icon from 'react-native-vector-icons/FontAwesome';
import Ionicons from 'react-native-vector-icons/Ionicons';

import { SummaryStack } from '../screens/Summary/summary.stack';
import { PostStack } from '../screens/Post/post.stack';
import { FeedStack } from '../screens/Feed/feed.stack';
import { FavoritesStack } from '../screens/Favorites/favorites.stack';
import images from '../themes/assets/images';
import { SettingsDashboardScreen } from '../screens/Settings';
import colors from '../components/rb-constants/colors';
import { updateDeviceInfo } from '../api/profile';

const Tab = createBottomTabNavigator();
const Stack = createStackNavigator();

export type AppStackParamList = {
  Feed: undefined;
  Summary: undefined;
  Favorites: undefined;
  Settings: undefined;
  Post: undefined;
  MyTabs: undefined;
};

function Tabs() {
  return (
    <Tab.Navigator
      initialRouteName="Summary"
      screenOptions={({ route }) => ({
        headerShown: false,
        lazy: false,
        tabBarShowLabel: false,
        tabBarIcon: ({ focused, color, size }) => {
          let iconName;

          if (route.name === 'Summary') {
            iconName = focused ? 'home' : 'home-outline';
          } else if (route.name === 'Feed') {
            iconName = focused ? 'bar-chart' : 'bar-chart-outline';
          } else if (route.name === 'Favorites') {
            iconName = focused ? 'heart' : 'heart-outline';
          } else if (route.name === 'Post') {
            iconName = focused ? 'ios-chatbubble' : 'ios-chatbubble-outline';
          } else if (route.name === 'Settings') {
            iconName = focused ? 'settings' : 'settings-outline';
          }
          // You can return any component that you like here!
          return <Ionicons name={iconName} size={size} color={color} />;
        },
        tabBarActiveTintColor: 'tomato',
        tabBarInactiveTintColor: 'gray',
      })}>
      <Tab.Screen name="Summary" component={SummaryStack} />
      <Tab.Screen name="Feed" component={FeedStack} />
      <Tab.Screen name="Favorites" component={FavoritesStack} />
      <Tab.Screen name="Post" component={PostStack} />
    </Tab.Navigator>
  );
}

const LogoTitle = (): JSX.Element => {
  return (
    <View row centerH>
      <Image width={200} height={20} source={images.logo2} />
    </View>
  );
};

function AppStack() {
  const [connected, setConnected] = useState(true);
  useEffect(() => {
    updateDeviceInfo();
    const unsubscribe = NetInfo.addEventListener((connectivity: any) => {
      console.log('Connection type', connectivity.type);
      console.log('Is connected?', connectivity.isConnected);
      setConnected(connectivity.isConnected);
    });
    return unsubscribe;
  }, []);
  return connected ? (
    <Stack.Navigator
      screenOptions={({ navigation, route }) => ({
        headerBackTitleVisible: false,
        hederShown: false,
        headerTitle: () => <LogoTitle />,
        headerRight: () => (
          <View row centerV>
            <TouchableOpacity>
              <Icon name="bell-o" color={colors.OrangeDark} size={20} />
            </TouchableOpacity>
            <TouchableOpacity
              style={{ marginLeft: 5, marginRight: 5 }}
              onPress={() => {
                navigation.navigate('Settings');
              }}>
              <Icon name="sliders" color={colors.OrangeDark} size={20} />
            </TouchableOpacity>
          </View>
        ),
      })}>
      <Stack.Screen name="MyTabs" component={Tabs} />
      <Stack.Screen name="Settings" component={SettingsDashboardScreen} />
    </Stack.Navigator>
  ) : (
    <View flex-1 center margin-25>
      <Icon name="warning" color={colors.OrangeDark} size={64} />
      <Text center>There is no internet connection</Text>
      <Text center>Please try again when you have an Internet connection</Text>
      <View row centerH marginT-40>
        <Image width={200} height={20} source={images.logo2} />
      </View>
    </View>
  );
}

export default AppStack;