import { isBusinessCatalogPath, isViewerPath, Paths } from "@/config/Paths";
import { clx } from "@/helpers/utils";
import Business from "@/pages/business/Business";
import CatalogueList from "@/pages/catalogue/List";
import RequestDesignList from "@/pages/designer/List";
import DesignerRequest from "@/pages/designer/Request";
import Editor from "@/pages/editor/Editor";
import Home from "@/pages/home/Home";
import Viewer from "@/pages/viewer/Viewer";
import PrivateRoute from "@/router/PrivateRoute";
import Header from "@/shared/Header";
import SideBar from "@/shared/SideBar";
import { useSharedStore } from "@/shared/store/sharedStore";
import { Route, Routes, useLocation } from "react-router-dom";

const MainRouter = () => {
  const { hasSubMenu } = useSharedStore();
  const location = useLocation();
  const isViewerRoute = isViewerPath(location.pathname);
  const isBusinessCatalogRoute = isBusinessCatalogPath(location.pathname);
  const hideAppChrome = isViewerRoute || isBusinessCatalogRoute;
  const hiddenSideBarRoutes = [Paths.editor];
  const shouldRenderSideBar = !hiddenSideBarRoutes.includes(location.pathname) && !hideAppChrome;
  const routeHasLocalSidebar = location.pathname.includes("editor");
  const hasSidebarSpace = shouldRenderSideBar || routeHasLocalSidebar;
  const headerSidebarSize = routeHasLocalSidebar ? "wide" : "default";

  return (
    <div className={clx("flex min-h-full flex-col overflow-hidden", isViewerRoute ? "fixed inset-0 z-50 bg-neutral-100" : "p-4")}>
      {!hideAppChrome && shouldRenderSideBar ? <SideBar /> : null}
      {!hideAppChrome ? <Header hasMainSidebar={hasSidebarSpace} sidebarSize={headerSidebarSize} /> : null}
      <div
        className={clx(
          "flex flex-1 flex-col min-h-0",
          !hideAppChrome && "mt-[68px] xl:mt-[81px]",
          !hideAppChrome && shouldRenderSideBar && "xl:ms-[269px]",
          !hideAppChrome && shouldRenderSideBar && hasSubMenu && "xl:ms-[305px]",
          !hideAppChrome && routeHasLocalSidebar && "xl:mr-[374px]",
        )}
      >
        <div className={clx("flex-1 flex flex-col w-full min-h-0", isViewerRoute ? "h-full overflow-hidden" : "overflow-auto max-h-[calc(100vh-113px)]")}>
          <div className="flex-1 h-full flex min-h-0">
            <Routes>
              <Route
                path={Paths.home}
                element={
                  <PrivateRoute requireAuth={true}>
                    <Home />
                  </PrivateRoute>
                }
              />
              <Route
                path={Paths.editor + "/:id"}
                element={
                  <PrivateRoute requireAuth={true}>
                    <Editor />
                  </PrivateRoute>
                }
              />
              <Route
                path={Paths.viewer + "/:id"}
                element={
                  <PrivateRoute requireAuth={false}>
                    <Viewer />
                  </PrivateRoute>
                }
              />
              <Route
                path={Paths.viewerBySlug + "/:businessSlug/:slug"}
                element={
                  <PrivateRoute requireAuth={false}>
                    <Viewer bySlug={true} />
                  </PrivateRoute>
                }
              />

              <Route path={Paths.catalog.business + ":slug"} element={<Business />} />

              <Route
                path={Paths.catalog.list}
                element={
                  <PrivateRoute>
                    <CatalogueList />
                  </PrivateRoute>
                }
              />
              <Route
                path={Paths.designer.request}
                element={
                  <PrivateRoute requireAuth={true}>
                    <DesignerRequest />
                  </PrivateRoute>
                }
              />
              <Route
                path={Paths.designer.list}
                element={
                  <PrivateRoute requireAuth={true}>
                    <RequestDesignList />
                  </PrivateRoute>
                }
              />
            </Routes>
          </div>
        </div>
      </div>
    </div>
  );
};

export default MainRouter;
