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 { 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 />,
    children: [
      {
        path: "menu",
        element: <PageWrapper children={<MenuPage />} />,
        errorElement: <ErrorPage />,
      },
      {
        path: "cart",
        element: (
          <PageWrapper
            children={
              <AppLayout>
                <CartPage />
              </AppLayout>
            }
          />
        ),
        errorElement: <ErrorPage />,
      },

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

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

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

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

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

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

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

  {
    path: "errors",
    errorElement: <ErrorPage />,
    children: [
      {
        path: "400",
        element: (
          <PrivateRoute>
            <Error400Page />
          </PrivateRoute>
        ),
      },
    ],
  },
]);

export default router;
