import { Grid } from "antd";
import { Loader } from "components/Loader/Loader";
import { PrivateRoute } from "components/privateRoute/PrivateRoute";
import { AppLayout } from "layouts";
import HeaderMenuDrawer from "layouts/app/HeaderMenuDrawer";
import AddressPage from "pages/address/page";
import CartPage from "pages/cart/page";
import CheckoutPage from "pages/checkout/page";
import LoginPage from "pages/login/page";
import MenuPage from "pages/menu/page";
import OrderPage from "pages/order/page";
import OrdersPage from "pages/orders/page";
import OtpPage from "pages/otp/page";
import ProductDetailPage from "pages/product/page";
import RestaurantPage from "pages/restaurant/page";
import SearchPage from "pages/search/page";
import SplitBillPage from "pages/split-bill/page";
import React, { ReactNode, Suspense, useEffect } from "react";
import { createHashRouter, useLocation } from "react-router-dom";
import { SignInPage } from "../pages/authentication";
import { Error400Page, ErrorPage } from "../pages/errors";

const { useBreakpoint } = Grid;

// Custom scroll restoration function
export const ScrollToTop: React.FC = () => {
  const { pathname } = useLocation();

  useEffect(() => {
    window.scrollTo({
      top: 0,
      left: 0,
      behavior: "smooth",
    }); // Scroll to the top when the location changes
  }, [pathname]);

  return null; // This component doesn't render anything
};

type PageProps = {
  children: ReactNode;
};

// Create an HOC to wrap your route components with ScrollToTop
const PageWrapper = ({ children }: PageProps) => {
  const { xs, sm, md } = useBreakpoint();
  return (
    <Suspense fallback={<Loader />}>
      <ScrollToTop />
      {children}
      {(xs || sm || md) && <HeaderMenuDrawer />}
    </Suspense>
  );
};

export const router = createHashRouter([
  {
    path: "/",
    element: <PageWrapper children={<RestaurantPage />} />,
    errorElement: <ErrorPage />,
  },

  {
    path: "/:id",
    element: <PageWrapper children={<RestaurantPage />} />,
    errorElement: <ErrorPage />,
  },

  {
    path: "/:id/menu",
    element: <PageWrapper children={<MenuPage />} />,
    errorElement: <ErrorPage />,
  },

  {
    path: "/:id/cart",
    element: (
      <PageWrapper
        children={
          <AppLayout>
            <CartPage />
          </AppLayout>
        }
      />
    ),
    errorElement: <ErrorPage />,
  },

  {
    path: "/:id/address",
    element: <PageWrapper children={<AddressPage />} />,
    errorElement: <ErrorPage />,
  },

  {
    path: "/:id/checkout",
    element: <PageWrapper children={<CheckoutPage />} />,
    errorElement: <ErrorPage />,
  },

  {
    path: "/:id/split-bill",
    element: <PageWrapper children={<SplitBillPage />} />,
    errorElement: <ErrorPage />,
  },

  {
    path: "/:id/product/:productId",
    element: <PageWrapper children={<ProductDetailPage />} />,
    errorElement: <ErrorPage />,
  },

  {
    path: "/:id/search",
    element: <PageWrapper children={<SearchPage />} />,
    errorElement: <ErrorPage />,
  },

  {
    path: "/:id/orders",
    element: (
      <PageWrapper
        children={
          <PrivateRoute>
            <OrdersPage />
          </PrivateRoute>
        }
      />
    ),
    errorElement: <ErrorPage />,
  },

  {
    path: "/:id/login",
    element: <PageWrapper children={<LoginPage />} />,
    errorElement: <ErrorPage />,
  },

  {
    path: "/:id/otp",
    element: <PageWrapper children={<OtpPage />} />,
    errorElement: <ErrorPage />,
  },

  {
    path: "/:id/order",
    element: <PageWrapper children={<OrderPage />} />,
    errorElement: <ErrorPage />,
  },

  {
    path: "/auth",
    errorElement: <ErrorPage />,
    children: [
      {
        path: "signin",
        element: <SignInPage />, // No PrivateRoute for sign-in
      },
    ],
  },
  {
    path: "errors",
    errorElement: <ErrorPage />,
    children: [
      {
        path: "400",
        element: (
          <PrivateRoute>
            <Error400Page />
          </PrivateRoute>
        ),
      },
    ],
  },
]);

export default router;