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

const markdownBody = () => import ('./views/markdown.vue')
const projectListBody = () => import ('./views/project-list.vue')
const projectViewBody = () => import ('./views/project-view.vue')
const galleryListBody = () => import ('./views/gallery-list.vue')
const galleryViewBody = () => import ('./views/gallery-view.vue')

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

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

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

    if (routes[route].template === 'project-list') {
      routeRecord.push({
        name: `${routes[route].id}: View Project`,
        path: `${route}/view`,
        component: projectViewBody,
        props: route => ({ id: route.query.id }),
      })
    } else if (routes[route].template === 'gallery-list') {
      toPush.props = route => ({ variants: (route.query.v as string || '').split(';') })

      routeRecord.push({
        name: `${routes[route].id}: View Entry`,
        path: `${route}/view`,
        component: galleryViewBody,
        props: route => ({ variants: (route.query.v as string || '').split(';') }),
      })
    }

    routeRecord.push(toPush)
  })

  return routeRecord
}

export const useRouteStore = defineStore('routeStore', {
  state: () => ({
    _header: [] as HeaderEntry[],
    _routes: {} as Record<string, RouteRecordRaw & RouteDefinition>,
    _globals: {} as SiteGlobals,
    
    _routesAlreadyWarned: {} as Record<string, boolean>
  }),
  actions: {
    doesRouteRememberWarning(route: string) {
      return this._routesAlreadyWarned[route]
    },
    rememberRouteWarning(route: string) {
      this._routesAlreadyWarned[route] = true
    }
  },
})

export const initializeRouteStore = (routerRoutes: readonly RouteRecordRaw[]) => {
  const routeStore = useRouteStore()
  Object.keys(routes).forEach(route => {
    routeStore._routes[route] = {
      ...routerRoutes.find(other => other.path === route) as RouteRecordRaw,
      ...routes[route] as RouteDefinition,
    }
    if (routes[route].template === 'project-list' || routes[route].template === 'gallery-list') {
      routeStore._routes[`${route}/view`] = {
        ...routerRoutes.find(other => other.path === `${route}/view`) as RouteRecordRaw,
        ...(routes[route] as ProjectListDefinition | GalleryListDefinition).view,
      } as any
    }
  })
  routeStore._header = header
  routeStore._globals = siteGlobals
}

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