import React from "react";
import Toast from 'react-native-toast-message';

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 } 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/ShippingDetailsSection";
import { GestureHandlerRootView } from "react-native-gesture-handler";
import { InquiryScreen } from "./app/screens/InquiryScreen/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";

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;
};

const Stack = createNativeStackNavigator<RootStackParamList>();

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.Navigator>
        </NavigationContainer>
      </AuthProvider>
      <Toast />
    </GestureHandlerRootView>
  );
}