import { lazy, useEffect, Suspense, useState } from 'react';
import {
  NavigationContainer,
  useNavigation,
  useRoute,
} from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { GestureHandlerRootView } from 'react-native-gesture-handler';

// import {I18nextProvider} from 'react-i18next';
import './locales/i18n.js';

import {
  Grid,
  Icon,
  Provider,
  SearchBar,
  Text,
  Toast,
} from '@ant-design/react-native';
import { AuthProvider, useContextHook } from './components/AuthContext/index';


import Login from '@/views/Login/index';
import Guide from '@/views/Guide/index';
import HomeIndex from '@/views/Home/Index/index';
import HomeInventory from '@/views/Home/Inventory/index';
import HomeProfile from '@/views/Home/Profile/index';


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

function HomeTabs() {
  const { themeColor } = useContextHook();
  return (
    <Tab.Navigator
      screenOptions={{
        tabBarActiveTintColor: themeColor.primaryColor,
        tabBarInactiveTintColor: themeColor.colorTextBase,
        headerShown: false,
      }}>
      <Tab.Screen
        name="index"
        options={{
          title: 'Home',
          tabBarIcon: ({ color, focused }) => (
            <Icon
              name="home"
              color={color}
              size={28}
              style={[{ marginBottom: -3 }]}
            />
          ),
        }}
        component={HomeIndex}
      />
      <Tab.Screen
        name="inventory"
        options={{
          title: 'Inventory',
          tabBarIcon: ({ color, focused }) => (
            <Icon
              name="appstore"
              color={color}
              size={28}
              style={[{ marginBottom: -3 }]}
            />
          ),
        }}
        component={HomeInventory}
      />
      <Tab.Screen
        name="profile"
        options={{
          title: 'Profile',
          tabBarIcon: ({ color, focused }) => (
            <Icon
              name="setting"
              color={color}
              size={28}
              style={[{ marginBottom: -3 }]}
            />
          ),
        }}
        component={HomeProfile}
      />
    </Tab.Navigator>
  );
}

function RootStack() { 
  return (
    <Stack.Navigator>
      <Stack.Screen
        name="Guide"
        options={{
          headerShown: false,
        }}
        component={Guide}
      />
      <Stack.Screen
        name="Login"
        options={{
          headerShown: false,
        }}
        component={Login}
      />
      <Stack.Screen
        name="Home"
        component={HomeTabs}
        options={{
          headerShown: false,
        }}
      />
    </Stack.Navigator>
  );
}
export default function App() {
  return (
    <GestureHandlerRootView>
      <AuthProvider>
        <NavigationContainer>
          <RootStack />
        </NavigationContainer>
      </AuthProvider>
    </GestureHandlerRootView>
  );
}