import { NavigationContainer } from "@react-navigation/native";
import React, { useState } from "react";
import { useWindowDimensions, View } from "react-native";
import { createStackNavigator } from "@react-navigation/stack";
import Main from "../pages/home/main";
import SearchPage from "../pages/search/SearchPage";
import SearchHeader from "../components/search/Header";
import ProductSinglePage from "../pages/product/ProductSinglePage";
import CheckOut from "../pages/checkout/CheckOut";
import Paymentoption from "../pages/checkout/Paymentoption";
import ShippingOption from "../pages/checkout/ShippingOption";
import AddressSelection from "../pages/checkout/AddressSelection";
import AccountSettings from "../pages/profile/AccountSettings";
import HelpCenter from "../pages/profile/HelpCentre";
import ViewHistory from "../pages/profile/ViewHistory";
import MyFavorites from "../pages/profile/MyFavorites";
import MyWallet from "../pages/profile/MyWallet";
import MyPurchases from "../pages/profile/MyPurchases";

const Stack = createStackNavigator();

const Route = () => {
  const { height, width } = useWindowDimensions();
  const [cartList, setcartList] = useState([]);

  return (
    <NavigationContainer>
      <View
        style={{
          // flex: 1,
          backgroundColor: "#fff",
          opacity: 1,
          width: "100%",
          height: "100%",
          // minHeight: height,
          // paddingTop:15
        }}
      >
        <Stack.Navigator initialRouteName="Home">
          <Stack.Screen name="Home" options={{ headerShown: false }}>
            {(props) => <Main {...props} cartList={cartList} />}
          </Stack.Screen>
          <Stack.Screen name="Search" options={{ headerShown: false }}>
            {(props) => <SearchPage {...props} />}
          </Stack.Screen>
          <Stack.Screen name="Product" options={{ headerShown: false }}>
            {(props) => (
              <ProductSinglePage
                {...props}
                cartList={cartList}
                setcartList={setcartList}
              />
            )}
          </Stack.Screen>
          <Stack.Screen name="CheckOut" options={{ headerShown: false }}>
            {(props) => <CheckOut {...props} />}
          </Stack.Screen>
          <Stack.Screen name="Paymentoption" options={{ headerShown: false }}>
            {(props) => <Paymentoption {...props} />}
          </Stack.Screen>
          <Stack.Screen name="ShippingOption" options={{ headerShown: false }}>
            {(props) => <ShippingOption {...props} />}
          </Stack.Screen>
          <Stack.Screen
            name="AddressSelection"
            options={{ headerShown: false }}
          >
            {(props) => <AddressSelection {...props} />}
          </Stack.Screen>
          <Stack.Screen name="MyPurchases" options={{ headerShown: false }}>
            {(props) => <MyPurchases {...props} />}
          </Stack.Screen>
          <Stack.Screen name="MyWallet" options={{ headerShown: false }}>
            {(props) => <MyWallet {...props} />}
          </Stack.Screen>
          <Stack.Screen name="MyFavorites" options={{ headerShown: false }}>
            {(props) => <MyFavorites {...props} />}
          </Stack.Screen>
          <Stack.Screen name="ViewHistory" options={{ headerShown: false }}>
            {(props) => <ViewHistory {...props} />}
          </Stack.Screen>
          <Stack.Screen name="HelpCenter" options={{ headerShown: false }}>
            {(props) => <HelpCenter {...props} />}
          </Stack.Screen>
          <Stack.Screen name="AccountSettings" options={{ headerShown: false }}>
            {(props) => <AccountSettings {...props} />}
          </Stack.Screen>
        </Stack.Navigator>
      </View>
    </NavigationContainer>
  );
};

export default Route;