import { createRouter, createWebHashHistory } from "vue-router";
import { defineAsyncComponent } from "vue";
import type { Component } from "vue";
import type { RouteRecordRaw } from "vue-router";
import { fallbackUserRoute, userMenu } from "./userMenu";
import type { UserNavItem } from "./types";

const pageComponents: Record<string, Component> = {
    profile: defineAsyncComponent(() => import("./pages/ProfilePage.vue")),
    security: defineAsyncComponent(() => import("./pages/SecurityPage.vue")),
    authorizations: defineAsyncComponent(
        () => import("./pages/AuthorizationsPage.vue"),
    ),
    sessions: defineAsyncComponent(() => import("./pages/SessionsPage.vue")),
    articles: defineAsyncComponent(() => import("./pages/ArticlesPage.vue")),
    mumbles: defineAsyncComponent(() => import("./pages/MumblesPage.vue")),
    timelines: defineAsyncComponent(() => import("./pages/TimelinesPage.vue")),
    albums: defineAsyncComponent(() => import("./pages/AlbumsPage.vue")),
};

const viewlessComponent: Component = { render: () => null };

const contentEditorChildren: Record<string, RouteRecordRaw[]> = {
    articles: [
        { path: "create", name: "articles-create", component: viewlessComponent },
        {
            path: "edit/:id",
            name: "articles-edit",
            component: viewlessComponent,
        },
    ],
    mumbles: [
        { path: "create", name: "mumbles-create", component: viewlessComponent },
        {
            path: "edit/:id",
            name: "mumbles-edit",
            component: viewlessComponent,
        },
    ],
    timelines: [
        { path: "create", name: "timelines-create", component: viewlessComponent },
        {
            path: "edit/:id",
            name: "timelines-edit",
            component: viewlessComponent,
        },
    ],
    albums: [
        { path: "create", name: "albums-create", component: viewlessComponent },
        { path: "edit/:id", name: "albums-edit", component: viewlessComponent },
    ],
};

function menuRoute(item: UserNavItem): RouteRecordRaw {
    return {
        path: item.hash.replace(/^#/, ""),
        name: item.key,
        component: pageComponents[item.key],
        meta: {
            key: item.key,
            icon: item.icon,
            title: item.title,
            subtitle: item.subtitle,
            group: item.group,
            accent: item.accent,
        },
        children: contentEditorChildren[item.key],
    };
}

export const userRouter = createRouter({
    history: createWebHashHistory(),
    routes: [
        ...userMenu.map(menuRoute),
        { path: "/:pathMatch(.*)*", redirect: `/${fallbackUserRoute.key}` },
    ],
});