app/App.tsx

import 'react-native-gesture-handler';
import React from "react";
import { useEffect } from "react";
import Toast from 'react-native-toast-message';
import { Alert } from "react-native";
import { userApi } from "./app/services/api/userApi";
import useUserStore from "./app/store/user";
import { NavigationContainer } from "@react-navigation/native";
import { createNativeStackNavigator } from "@react-navigation/native-stack";
import { CountrySelect } from "./app/screens/CountrySelect";
import { MainApp } from "./app/screens/MainApp";
import { LoginScreen } from "./app/screens/LoginScreen";
import { EmailLoginScreen } from "./app/screens/EmailLoginScreen";
import { GoogleScreen } from "./app/screens/login/Google";
import "./app/i18n";
import { TabNavigator } from "./app/navigation/TabNavigator";
import { AuthProvider, useAuth } from "./app/contexts/AuthContext";
import { SearchScreen } from "./app/screens/SearchScreen";
import { SearchResultScreen } from "./app/screens/SearchResultScreen";
import { ProductDetailScreen } from "./app/screens/ProductDetailScreen";
import { BalanceScreen } from "./app/screens/BalanceScreen";
import { ShippingDetailsSection } from "./app/screens/banner/ShippingDetailsSection";
import { GestureHandlerRootView } from "react-native-gesture-handler";
import { InquiryScreen } from "./app/screens/banner/InquiryScreen";
import { Recipient } from "./app/screens/Recipient/Recipient";
import { AddRess } from "./app/screens/Recipient/Address";
import { SettingList } from "./app/screens/setting/SettingList";
import { CountrySetting } from "./app/screens/setting/CountrySetting";
import { MySetting } from "./app/services/api/setting";
import { MyAddress } from "./app/screens/setting/MyAddress";
import { CartScreen } from "./app/screens/CartScreen";
import { PaymentSuccessScreen } from "./app/screens/pay/PaySuccess";
import { MyAccount } from "./app/screens/MyAccount/myAccount";
import { ConfirmOrder } from "./app/screens/Recipient/ConfirmOrder";
import { Pay } from "./app/screens/pay/Pay";
import { Status } from "./app/screens/productStatus/Status";
import { OrderDetails } from "./app/screens/productStatus/OrderDatails";
import { TikTokScreen } from "./app/screens/banner/TikTokScreen";
import { BrowseHistoryScreen } from "./app/screens/function/BrowseHistoryScreen";
import { Collection } from "./app/screens/function/Collection";
import AsyncStorage from '@react-native-async-storage/async-storage';
import { MemberIntroduction } from "./app/screens/MemberScreen/MemberIntroduction";
import { CompanyScreen } from "./app/screens/MemberScreen/CompanyScreen";

export type RootStackParamList = {
  CountrySelect: undefined;
  MainApp: undefined;
  Login: undefined;
  EmailLogin: undefined;
  MainTabs: undefined;
  Search: undefined;
  SearchResult: { keyword: string };
  ProductDetail: { productId: string; searchKeyword?: string };
  Balance: undefined;
  ShippingDetailsSection: undefined;
  InquiryScreen: undefined;
  Recipient: { items: { cart_item_id: number }[] };
  AddRess:undefined;
  SettingList:undefined;
  CountrySetting: { mySetting?: MySetting };
  MyAddress:undefined;
  CartScreen:undefined;
  PaymentSuccessScreen:undefined;
  MyAccount:undefined;
  Google: undefined;
  ConfirmOrder: undefined;
  Pay: undefined;
  Status: undefined;
  OrderDetails: undefined;
  TikTokScreen: undefined;
  BrowseHistoryScreen: undefined;
  Collection: undefined;
  MemberIntroduction: undefined;
  CompanyScreen: undefined;
};

const Stack = createNativeStackNavigator<RootStackParamList>();

function AppContent() {
  const {setUser} = useUserStore();
  const { login, logout } = useAuth();

  const getUserInfo = async () => {
    const token = await AsyncStorage.getItem('token');
    if(token){
      try {
        const user = await userApi.getProfile();
        setUser(user);
        login();
      } catch (error) {
        logout();
      }
    }
  }

  useEffect(() => {
    getUserInfo()    
  }, []);

  return (
    <GestureHandlerRootView style={{ flex: 1 }}>
      <AuthProvider>
        <NavigationContainer>
          <Stack.Navigator
            screenOptions={{
              headerShown: false,
            }}
          >
            <Stack.Screen name="CountrySelect" component={CountrySelect} />
            <Stack.Screen
              name="Login"
              component={LoginScreen}
              options={{  
                presentation: "modal",
                animation: "slide_from_bottom",
                gestureEnabled: true,
                gestureDirection: "vertical",
              }}
            />
            <Stack.Screen
              name="MainTabs"
              component={TabNavigator}
              options={{
                gestureEnabled: false,
              }}
            />
            <Stack.Screen
              name="EmailLogin"
              component={EmailLoginScreen}
              options={{
                presentation: "modal",
                animation: "slide_from_bottom",
                gestureEnabled: true,
                gestureDirection: "vertical",
              }}
            />
            <Stack.Screen
              name="Search"
              component={SearchScreen}
              options={{
                presentation: "fullScreenModal",
                animation: "fade",
                animationDuration: 200,
                gestureEnabled: true,
                gestureDirection: "vertical",
                contentStyle: { backgroundColor: "#ffffff" },
              }}
            />
            <Stack.Screen
              name="SearchResult"
              component={SearchResultScreen}
              options={{
                animation: "slide_from_right",
                gestureEnabled: true,
                gestureDirection: "horizontal",
              }}
            />
            <Stack.Screen
              name="ProductDetail"
              component={ProductDetailScreen}
              options={{
                animation: "slide_from_right",
                gestureEnabled: true,
                gestureDirection: "horizontal",
              }}
            />
            <Stack.Screen
              name="Balance"
              component={BalanceScreen}
              options={{
                animation: "slide_from_right",
                gestureEnabled: true,
                gestureDirection: "horizontal",
              }}
            />
            <Stack.Screen
              name="ShippingDetailsSection"
              component={ShippingDetailsSection}
              options={{
                animation: "slide_from_right",
                gestureEnabled: true,
                gestureDirection: "horizontal",
              }}
            />
            <Stack.Screen
              name="InquiryScreen"
              component={InquiryScreen}
              options={{
                animation: "slide_from_right",
                gestureEnabled: true,
                gestureDirection: "horizontal",
              }}
            />
            <Stack.Screen
              name="Recipient"
              component={Recipient}
              options={{
                animation: "slide_from_right",
                gestureEnabled: true,
                gestureDirection: "horizontal",
              }}
            />
            <Stack.Screen
              name="AddRess"
              component={AddRess}
              options={{
                animation: "slide_from_right",
                gestureEnabled: true,
                gestureDirection: "horizontal",
              }}
            />
            <Stack.Screen
              name="SettingList"
              component={SettingList}
              options={{
                animation: "slide_from_right",
                gestureEnabled: true,
                gestureDirection: "horizontal",
              }}
            />
            <Stack.Screen
              name="CountrySetting"
              component={CountrySetting}
              options={{
                animation: "slide_from_right",
                gestureEnabled: true,
                gestureDirection: "horizontal",
              }}
            />
            <Stack.Screen
              name="MyAddress"
              component={MyAddress}
              options={{
                animation: "slide_from_right",
                gestureEnabled: true,
                gestureDirection: "horizontal",
              }}
            />
            <Stack.Screen
              name="CartScreen"
              component={CartScreen}
              options={{
                animation: "slide_from_right",
                gestureEnabled: true,
                gestureDirection: "horizontal",
              }}
            />
            <Stack.Screen
              name="PaymentSuccessScreen"
              component={PaymentSuccessScreen}
              options={{
                animation: "slide_from_right",
                gestureEnabled: true,
                gestureDirection: "horizontal",
              }}
            />
            <Stack.Screen
              name="MyAccount"
              component={MyAccount}
              options={{
                animation: "slide_from_right",  
                gestureEnabled: true,
                gestureDirection: "horizontal",
              }}
            />
            <Stack.Screen
              name="Google"
              component={GoogleScreen}
              options={{
                animation: "slide_from_right",
                gestureEnabled: true,
                gestureDirection: "horizontal",
              }}
            />
            <Stack.Screen
              name="ConfirmOrder"
              component={ConfirmOrder}
              options={{
                animation: "slide_from_right",
                gestureEnabled: true,
                gestureDirection: "horizontal",
              }}
            />
            <Stack.Screen
              name="Pay"
              component={Pay}
              options={{
                animation: "slide_from_right",
                gestureEnabled: true,
                gestureDirection: "horizontal",
              }}
            />
            <Stack.Screen
              name="Status"
              component={Status}
              options={{
                animation: "slide_from_right",
                gestureEnabled: true,
                gestureDirection: "horizontal",
              }}
            />
            <Stack.Screen
              name="OrderDetails"
              component={OrderDetails}
              options={{
                animation: "slide_from_right",
                gestureEnabled: true,
                gestureDirection: "horizontal",
              }}
            />
            <Stack.Screen
              name="TikTokScreen"
              component={TikTokScreen}
              options={{
                animation: "slide_from_right",
                gestureEnabled: true,
                gestureDirection: "horizontal",
              }}
            />
            <Stack.Screen
              name="BrowseHistoryScreen"
              component={BrowseHistoryScreen}
              options={{
                animation: "slide_from_right",
                gestureEnabled: true,
                gestureDirection: "horizontal",
              }}
            />
            <Stack.Screen
              name="Collection"
              component={Collection}
              options={{
                animation: "slide_from_right",
                gestureEnabled: true,
                gestureDirection: "horizontal",
              }}
            />
            <Stack.Screen
              name="MemberIntroduction"
              component={MemberIntroduction}
              options={{
                animation: "slide_from_right",
                gestureEnabled: true,
                gestureDirection: "horizontal",
              }}
            />
            <Stack.Screen
              name="CompanyScreen"
              component={CompanyScreen}
              options={{
                animation: "slide_from_right",
                gestureEnabled: true,
                gestureDirection: "horizontal",
              }}
            />
          </Stack.Navigator>
        </NavigationContainer>
        <Toast />
      </AuthProvider>
    </GestureHandlerRootView>
  );
}

export default function App() {
  return (
    <GestureHandlerRootView style={{ flex: 1 }}>
      <AuthProvider>
        <NavigationContainer>
          <Stack.Navigator
            screenOptions={{
              headerShown: false,
            }}
          >
            <Stack.Screen name="CountrySelect" component={CountrySelect} />
            <Stack.Screen
              name="Login"
              component={LoginScreen}
              options={{  
                presentation: "modal",
                animation: "slide_from_bottom",
                gestureEnabled: true,
                gestureDirection: "vertical",
              }}
            />
            <Stack.Screen
              name="MainTabs"
              component={TabNavigator}
              options={{
                gestureEnabled: false,
              }}
            />
            <Stack.Screen
              name="EmailLogin"
              component={EmailLoginScreen}
              options={{
                presentation: "modal",
                animation: "slide_from_bottom",
                gestureEnabled: true,
                gestureDirection: "vertical",
              }}
            />
            <Stack.Screen
              name="Search"
              component={SearchScreen}
              options={{
                presentation: "fullScreenModal",
                animation: "fade",
                animationDuration: 200,
                gestureEnabled: true,
                gestureDirection: "vertical",
                contentStyle: { backgroundColor: "#ffffff" },
              }}
            />
            <Stack.Screen
              name="SearchResult"
              component={SearchResultScreen}
              options={{
                animation: "slide_from_right",
                gestureEnabled: true,
                gestureDirection: "horizontal",
              }}
            />
            <Stack.Screen
              name="ProductDetail"
              component={ProductDetailScreen}
              options={{
                animation: "slide_from_right",
                gestureEnabled: true,
                gestureDirection: "horizontal",
              }}
            />
            <Stack.Screen
              name="Balance"
              component={BalanceScreen}
              options={{
                animation: "slide_from_right",
                gestureEnabled: true,
                gestureDirection: "horizontal",
              }}
            />
            <Stack.Screen
              name="ShippingDetailsSection"
              component={ShippingDetailsSection}
              options={{
                animation: "slide_from_right",
                gestureEnabled: true,
                gestureDirection: "horizontal",
              }}
            />
            <Stack.Screen
              name="InquiryScreen"
              component={InquiryScreen}
              options={{
                animation: "slide_from_right",
                gestureEnabled: true,
                gestureDirection: "horizontal",
              }}
            />
            <Stack.Screen
              name="Recipient"
              component={Recipient}
              options={{
                animation: "slide_from_right",
                gestureEnabled: true,
                gestureDirection: "horizontal",
              }}
            />
            <Stack.Screen
              name="AddRess"
              component={AddRess}
              options={{
                animation: "slide_from_right",
                gestureEnabled: true,
                gestureDirection: "horizontal",
              }}
            />
            <Stack.Screen
              name="SettingList"
              component={SettingList}
              options={{
                animation: "slide_from_right",
                gestureEnabled: true,
                gestureDirection: "horizontal",
              }}
            />
            <Stack.Screen
              name="CountrySetting"
              component={CountrySetting}
              options={{
                animation: "slide_from_right",
                gestureEnabled: true,
                gestureDirection: "horizontal",
              }}
            />
            <Stack.Screen
              name="MyAddress"
              component={MyAddress}
              options={{
                animation: "slide_from_right",
                gestureEnabled: true,
                gestureDirection: "horizontal",
              }}
            />
            <Stack.Screen
              name="CartScreen"
              component={CartScreen}
              options={{
                animation: "slide_from_right",
                gestureEnabled: true,
                gestureDirection: "horizontal",
              }}
            />
            <Stack.Screen
              name="PaymentSuccessScreen"
              component={PaymentSuccessScreen}
              options={{
                animation: "slide_from_right",
                gestureEnabled: true,
                gestureDirection: "horizontal",
              }}
            />
            <Stack.Screen
              name="MyAccount"
              component={MyAccount}
              options={{
                animation: "slide_from_right",  
                gestureEnabled: true,
                gestureDirection: "horizontal",
              }}
            />
            <Stack.Screen
              name="Google"
              component={GoogleScreen}
              options={{
                animation: "slide_from_right",
                gestureEnabled: true,
                gestureDirection: "horizontal",
              }}
            />
            <Stack.Screen
              name="ConfirmOrder"
              component={ConfirmOrder}
              options={{
                animation: "slide_from_right",
                gestureEnabled: true,
                gestureDirection: "horizontal",
              }}
            />
            <Stack.Screen
              name="Pay"
              component={Pay}
              options={{
                animation: "slide_from_right",
                gestureEnabled: true,
                gestureDirection: "horizontal",
              }}
            />
            <Stack.Screen
              name="Status"
              component={Status}
              options={{
                animation: "slide_from_right",
                gestureEnabled: true,
                gestureDirection: "horizontal",
              }}
            />
            <Stack.Screen
              name="OrderDetails"
              component={OrderDetails}
              options={{
                animation: "slide_from_right",
                gestureEnabled: true,
                gestureDirection: "horizontal",
              }}
            />
            <Stack.Screen
              name="TikTokScreen"
              component={TikTokScreen}
              options={{
                animation: "slide_from_right",
                gestureEnabled: true,
                gestureDirection: "horizontal",
              }}
            />
            <Stack.Screen
              name="BrowseHistoryScreen"
              component={BrowseHistoryScreen}
              options={{
                animation: "slide_from_right",
                gestureEnabled: true,
                gestureDirection: "horizontal",
              }}
            />
            <Stack.Screen
              name="Collection"
              component={Collection}
              options={{
                animation: "slide_from_right",
                gestureEnabled: true,
                gestureDirection: "horizontal",
              }}
            />
            <Stack.Screen
              name="MemberIntroduction"
              component={MemberIntroduction}
              options={{
                animation: "slide_from_right",
                gestureEnabled: true,
                gestureDirection: "horizontal",
              }}
            />
            <Stack.Screen
              name="CompanyScreen"
              component={CompanyScreen}
              options={{
                animation: "slide_from_right",
                gestureEnabled: true,
                gestureDirection: "horizontal",
              }}
            />
          </Stack.Navigator>
        </NavigationContainer>
        <Toast />
      </AuthProvider>
    </GestureHandlerRootView>
  );
}