import { TABS } from "@/config/tabs";
import RootLayout from "@/layouts/root";
import Buttons from "@/pages/buttons";
import Design from "@/pages/design";
import Engage from "@/pages/engage";
import Fields from "@/pages/fields";
import General from "@/pages/general";
import NotFound from "@/pages/not-found";
import Placeholder from "@/pages/placeholder";
import ProPreview from "@/pages/pro";
import Rules from "@/pages/rules";
import Seo from "@/pages/seo";
import Tools from "@/pages/tools";
import Wizard from "@/pages/wizard";
import { createHashRouter } from "react-router";

/**
 * Tabs that are built. The rest show a placeholder until their step.
 */
const PAGES = {
  general: General,
  buttons: Buttons,
  fields: Fields,
  design: Design,
  rules: Rules,
  engage: Engage,
  seo: Seo,
  tools: Tools,
};

const tabRoutes = TABS.map((tab) => {
  const Page = PAGES[tab.key];
  let element = <Placeholder tab={tab} />;
  if (Page) {
    element = <Page />;
  } else if (tab.pro) {
    element = <ProPreview tab={tab} />;
  }

  return tab.path === "/"
    ? { index: true, element }
    : { path: tab.path.slice(1), element };
});

export const router = createHashRouter([
  {
    path: "/",
    element: <RootLayout />,
    children: [
      ...tabRoutes,
      { path: "wizard", element: <Wizard /> },
      { path: "*", element: <NotFound /> },
    ],
  },
]);