import { NavigationContainer, useNavigation } from "@react-navigation/native";
import React, { useEffect, 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";
import ShopSinglePage from "../pages/shop/ShopSinglePage";
import CheckOutMultiple from "../pages/cart/CheckOutMultiple";
import PaymentoptionMulti from "../pages/cart/Paymentoption";
import ShippingOptionMulti from "../pages/cart/ShippingOption";
import AddressSelectionMulti from "../pages/cart/AddressSelection";
import Register from "../pages/auth/Register";
import Login from "../pages/auth/Login";
import AsyncStorage from "@react-native-async-storage/async-storage";
import Address from "../pages/address/Address";
import Addresses from "../pages/address/Addresses";
import ForgotPassword from "../pages/auth/ForgotPassword";
import AccountAndSecurity from "../pages/profile/AccountAndSecurity";
import { get_all_vendors } from "../services/api/controllers/vendor";
import { get_all_products } from "../services/api/controllers/product";
import AddressCheckout from "../pages/address/AddressCheckout";

const Stack = createStackNavigator();

const Route = () => {
  const { height, width } = useWindowDimensions();
  const [cartList, setcartList] = useState([]);
  const [user, setuser] = useState(false);
  const [product, setproduct] = useState([]);
  const [products, setproducts] = useState([]);

  // const navigation = useNavigation();

  useEffect(() => {
    /* ---------------Check for the user saved email--------------- */

    AsyncStorage.getItem("AccessToken")
      .then((pass) => {
        pass === null ? setuser(false) : setuser(true);
      })
      .catch((error) => {
        console.log(error + "weeewwww");
      });
  }, []);
  useEffect(() => {
    /* ---------------Check for the user saved email--------------- */

    get_all_products()
      .then((result) => {
        if (result.error) {
          setError(result.error);
        } else {
          const filtered = result.data.filter(
            (item) =>
              item.product_type !== "variation" &&
              item.product_image !== "" &&
              item.product_image !== null
          );
          const filtered1 = result.data.filter(
            (item) =>
              item.product_type === "variation" &&
              item.product_image !== "" &&
              item.product_image !== null
          );
          setproduct(filtered);
          setproducts(filtered1);
        }
      })
      .catch((error) => {
        setError(error.message);
      })
      .finally(() => {
        // setprodIsLoading(false); // Set loading to false when done loading
      });
  }, []);
  return (
    <NavigationContainer>
      <View
        style={{
          backgroundColor: "#fff",
          opacity: 1,
          width: "100%",
          height: "100%",
        }}
      >
        <Stack.Navigator initialRouteName="Home">
          <Stack.Screen name="Register" options={{ headerShown: false }}>
            {(props) => <Register {...props} />}
          </Stack.Screen>
          <Stack.Screen name="Login" options={{ headerShown: false }}>
            {(props) => <Login {...props} />}
          </Stack.Screen>
          <Stack.Screen name="ForgotPassword" options={{ headerShown: false }}>
            {(props) => <ForgotPassword {...props} />}
          </Stack.Screen>
          <Stack.Screen name="Home" options={{ headerShown: false }}>
            {(props) => <Main {...props} cartList={cartList} />}
          </Stack.Screen>
          <Stack.Screen name="Search" options={{ headerShown: false }}>
            {(props) => (
              <SearchPage product={product} productAll={products} {...props} />
            )}
          </Stack.Screen>
          <Stack.Screen name="Product" options={{ headerShown: false }}>
            {(props) => (
              <ProductSinglePage
                {...props}
                cartList={cartList}
                prod={products}
                setcartList={setcartList}
              />
            )}
          </Stack.Screen>
          <Stack.Screen name="Shop" options={{ headerShown: false }}>
            {(props) => <ShopSinglePage productList={products} {...props} />}
          </Stack.Screen>
          <Stack.Screen name="CheckOut" options={{ headerShown: false }}>
            {(props) => <CheckOut {...props} />}
          </Stack.Screen>
          <Stack.Screen
            name="CheckOutMultiple"
            options={{ headerShown: false }}
          >
            {(props) => <CheckOutMultiple {...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="PaymentoptionMulti"
            options={{ headerShown: false }}
          >
            {(props) => <PaymentoptionMulti {...props} />}
          </Stack.Screen>
          <Stack.Screen
            name="ShippingOptionMulti"
            options={{ headerShown: false }}
          >
            {(props) => <ShippingOptionMulti {...props} />}
          </Stack.Screen>
          <Stack.Screen
            name="AddressSelectionMulti"
            options={{ headerShown: false }}
          >
            {(props) => <AddressSelectionMulti {...props} />}
          </Stack.Screen>
          <Stack.Screen name="MyPurchases" options={{ headerShown: false }}>
            {(props) => <MyPurchases {...props} />}
          </Stack.Screen>
          <Stack.Screen name="Address" options={{ headerShown: false }}>
            {(props) => <Addresses {...props} />}
          </Stack.Screen>
          <Stack.Screen name="AddressCreate" options={{ headerShown: false }}>
            {(props) => <Address {...props} />}
          </Stack.Screen>
          <Stack.Screen name="AddressCreate1" options={{ headerShown: false }}>
            {(props) => <AddressCheckout {...props} />}
          </Stack.Screen>
          <Stack.Screen name="MyWallet" options={{ headerShown: false }}>
            {(props) => <MyWallet {...props} />}
          </Stack.Screen>
          <Stack.Screen name="MyFavorites" options={{ headerShown: false }}>
            {(props) => <MyFavorites prod={product} {...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.Screen
            name="AccountAndSecurity"
            options={{ headerShown: false }}
          >
            {(props) => <AccountAndSecurity {...props} />}
          </Stack.Screen>
        </Stack.Navigator>
      </View>
    </NavigationContainer>
  );
};

export default Route;