import { defineStore } from 'pinia'
import { type RouteRecordRaw } from 'vue-router'
import { routes, type HeaderEntry, type RouteDefinition, type Template } from 'content/routes.js'

const markdownBody = () => import ('./views/markdown.vue')
const projectListBody = () => import ('./views/project-list.vue')

export const templates: Record<Template, () => Promise<any>> = {
  'markdown': markdownBody,
  'project-list': projectListBody,
}

export const createRoutes = (): RouteRecordRaw[] => {
  const routeRecord: RouteRecordRaw[] = []

  Object.keys(routes).forEach(route => {
    routeRecord.push({
      name: routes[route].id,
      path: route,
      component: templates[routes[route].template],
    })
  })

  return routeRecord
}

export const useRouteStore = defineStore('routeStore', {
  state: () => ({
    _header: [] as HeaderEntry[],
    _routes: {} as Record<string, RouteRecordRaw & RouteDefinition>,
  }),
  actions: {

  },
})

export type RouteStoreDefinition = Omit<
  ReturnType<typeof useRouteStore>,
  keyof ReturnType<typeof defineStore>
>