import { createRouter, createWebHistory, type RouteLocationNormalizedLoaded } from "vue-router";
import Home from "@/Home.vue";
import Market from "@/Market.vue";
import Noita from "@/Noita.vue";
import OpusMagnum from "@/OpusMagnum.vue";
import Submissions from "@/Submissions.vue";
import SubmissionsSelect from "@/SubmissionsSelect.vue";
import { bootstrap } from "@/bootstrap";

declare module "vue-router" {
  interface RouteMeta {
    titleKey?: string;
    getBackPath?: (route: RouteLocationNormalizedLoaded) => string;
  }
}

// Route params (eventPath, gamePath, scopeId, ...) come from the URL;
// page-specific extras Django can't express as URL segments (collection
// title, scope name, ...) come from the bootstrap JSON island instead.
const withBootstrap = (route: RouteLocationNormalizedLoaded) => ({
  ...route.params,
  ...bootstrap,
});

const eventHome = (route: RouteLocationNormalizedLoaded) => `/${route.params.eventPath}/`;

export const router = createRouter({
  history: createWebHistory("/"),
  routes: [
    {
      path: "/:eventPath/",
      name: "home",
      component: Home,
      props: withBootstrap,
    },
    {
      path: "/:eventPath/market",
      name: "market",
      component: Market,
      props: withBootstrap,
      meta: { titleKey: "market.header", getBackPath: eventHome },
    },
    {
      path: "/:eventPath/opus-magnum",
      name: "opus-magnum",
      component: OpusMagnum,
      props: withBootstrap,
      meta: { titleKey: "opusMagnum.header", getBackPath: eventHome },
    },
    {
      path: "/:eventPath/noita",
      name: "noita",
      component: Noita,
      props: withBootstrap,
      meta: { titleKey: "noita.header", getBackPath: eventHome },
    },
    {
      path: "/:eventPath/submissions/:gamePath",
      name: "submissions-select",
      component: SubmissionsSelect,
      props: withBootstrap,
      meta: { titleKey: "submissionsSelect.title", getBackPath: eventHome },
    },
    {
      path: "/:eventPath/submissions/:gamePath/:scopeId",
      name: "submissions",
      component: Submissions,
      props: withBootstrap,
      meta: {
        titleKey: "submissions.pageTitle",
        getBackPath: (route) => `/${route.params.eventPath}/submissions/${route.params.gamePath}`,
      },
    },
  ],
});