import React, { Suspense, useEffect } from "react";
import { Route, Routes, useNavigate } from "react-router-dom";
import { useAppDispatch } from "../redux/hooks";
import { setToken } from "../slices/loginSlice/loginSlice";
import { decodeToken, getDecryptedToken } from "../auth/authHandler";
import AppLoader from "../../features/components/custom/skeliton";
import { LandingPage } from "../../features/view/public/landingPage";
import ProfilePage from "../../features/view/private/profilePage";
import {
  getProfileDataAsync,
  setUserDetails,
  setValidUser,
} from "../slices/profileSlice/ProfileSlice";
import { ChekoutPage } from "../../features/view/private/chekout";
import { ProductListingPage } from "../../features/view/public/productListPage";
import { ProductDescriptionPage } from "../../features/view/public/productDescription";
import { fetchCartListAsync } from "../slices/cartSlice/CartSlice";
import { OrderConfirmation } from "../../features/view/private/profilePage/components/OrderConfirmation";
import { ShopAll } from "../../features/view/public/landingPage/components/ShopAll";
import { OrderConfirmationFailed } from "../../features/view/private/profilePage/components/OrderConfirmationFailed";
import { OfferListingPage } from "../../features/view/public/offerListing";
import { CustomOrdersPage } from "../../features/view/public/customOrders";
import { CustomCakeDescriptionPage } from "../../features/view/public/customCakeDetails";
import { SearchResultPage } from "../../features/view/public/searchResults";
import { CustomOrderApproved } from "../../features/view/public/customOrders/CustomOrderApproved";
import { Faq } from "../../features/view/public/landingPage/components/Faq";
import { CustomOrderSubmitted } from "../../features/view/public/customOrders/customOrderSubmitted";
import { AboutUs } from "../../features/view/public/landingPage/components/AboutUs";
import { StoreLocations } from "../../features/view/public/landingPage/components/StoreLocations";
import { OfferListingDetails } from "../../features/view/public/offerListingDetails";
import { NotificationPage } from "../../features/view/public/Notifications";
import { PrivactPolicy } from "../../features/view/public/landingPage/components/PrivacyPolicy";
import { TermsAndConditions } from "../../features/view/public/landingPage/components/TermsAndConditions";
import { ReadPolicy } from "../../features/view/public/landingPage/components/ReadPolicy";
import { useLocation } from "react-router-dom";
import { CancelRefund } from "../../features/view/public/landingPage/components/CancelRefund";
const LoginPage = React.lazy(
  () => import("../../features/view/public/loginPage")
);

// const ProductListingPage = React.lazy(
//   () => import("../../features/view/public/productListPage")
// );
export default function BrowserRouterPage() {
  const dispatch = useAppDispatch();
  const navigate = useNavigate();
  const location = useLocation();

  useEffect(() => {
    const aId = localStorage.getItem("aId");
    const accessToken = getDecryptedToken();
    const anonymous_id = accessToken ? null : aId ? aId : null;
    dispatch(fetchCartListAsync(anonymous_id));
    if (accessToken) {
      dispatch(setToken(accessToken));
      const user = decodeToken(accessToken);
      if (user) {
        dispatch(getProfileDataAsync()).then((response: any) => {
          if (response?.payload?.status === 200) {
            const ResponseData = response?.payload?.data;
            dispatch(setUserDetails(ResponseData.data));
            dispatch(setValidUser(user));
          }
        });
        // navigate("/");
      }
    }
  }, [dispatch, navigate]);

  return (
    <Suspense fallback={<AppLoader />}>
      <Routes>
        <Route path="/" element={<LandingPage />} />
        <Route path="/login" element={<LoginPage />} />
        <Route path="/profile" element={<ProfilePage />} />
        <Route path="/checkout" element={<ChekoutPage />} />
        {/* <Route path="/product" element={<ProductListingPage />} /> */}
        <Route path="/product/:productId" element={<ProductListingPage />} />
        <Route path="/offerList" element={<OfferListingPage />} />
        <Route
          path="/offerList/orders/discounts/:productId"
          element={<OfferListingDetails key={location.pathname} />}
        />
        <Route path="/customOrders" element={<CustomOrdersPage />} />
        <Route
          path="/customOrders/products/custom-product/:productId"
          element={<CustomCakeDescriptionPage />}
        />
        <Route path="/order-confirmation" element={<OrderConfirmation />} />
        <Route path="/order-failed" element={<OrderConfirmationFailed />} />
        <Route path="/shopAll" element={<ShopAll />} />
        <Route
          path="/products/:productId"
          element={<ProductDescriptionPage />}
        />
        <Route
          path="/custom-order-approved"
          element={<CustomOrderApproved />}
        />
        <Route
          path="/custom-order-submitted"
          element={<CustomOrderSubmitted />}
        />
        <Route path="/faq" element={<Faq />} />
        <Route path="/aboutUs" element={<AboutUs />} />
        <Route path="/notifications" element={<NotificationPage />} />
        <Route path="/privacy-policy" element={<PrivactPolicy />} />
        <Route path="/read-policy" element={<ReadPolicy />} />
        <Route path="/cancellation-refund-policy" element={<CancelRefund />} />
        <Route path="/terms-conditions" element={<TermsAndConditions />} />
        {/* <Route path="/offerDetails" element={<OfferListingDetails />} /> */}
        <Route path="/store-locations/:storeId?" element={<StoreLocations />} />
        <Route path="/searchResults" element={<SearchResultPage />} />{" "}
        {/* With product ID */}{" "}
      </Routes>
    </Suspense>
  );
}