import { ViteSSG } from 'vite-ssg'
import { createPinia } from 'pinia'
const hljs = import('highlight.js')
import type { HLJSApi } from 'highlight.js'
const marked = import('marked')
import { markedHighlight } from 'marked-highlight'
import PrimeVue from 'primevue/config'
import Tooltip from 'primevue/tooltip'
import Aura from '@primevue/themes/aura'
import { definePreset } from '@primeuix/themes'

import type { RoutedWindow, SiteGlobals } from '@goldenwere/mackenzii-types'

import main from './main.vue'
import './main.sass'

import { createRoutes, initializeRouteStore } from './routes'
import { headingSectionsExtension } from './utilities/marked'

import globals from 'content/config.json'

declare const window: RoutedWindow

export const createApp = ViteSSG(
  // the root component
  main,
  // vue-router options
  { routes: createRoutes(globals as unknown as SiteGlobals) },
  // function to have custom setups
  async ({ app, router, routes, isClient, initialState }) => {
    const hljsResolved: HLJSApi = await hljs as any
    const markedResolved = await marked
    markedResolved
    .use(headingSectionsExtension() as any)
    .use(markedHighlight({
      langPrefix: 'hljs language-',
      highlight(code, lang) {
        const language = hljsResolved.getLanguage(lang) ? lang : 'plaintext'
        return hljsResolved.highlight(code, { language }).value
      },
    }))

    if (isClient) {
      import('@goldenwere/mackenzii-embeds').then(({ registerLinkEmbed }) => {
        registerLinkEmbed()
      })
      window.router = router
    }

    app
    .use(createPinia())
    .use(PrimeVue, {
      theme: {
        // TBA: proper theme implementation between mackenzii and primevue
        preset: definePreset(Aura, {
          semantic: {
            primary: {
              50: '{neutral.50}',
              100: '{neutral.100}',
              200: '{neutral.200}',
              300: '{neutral.300}',
              400: '{neutral.400}',
              500: '{neutral.500}',
              600: '{neutral.600}',
              700: '{neutral.700}',
              800: '{neutral.800}',
              900: '{neutral.900}',
              950: '{neutral.950}',
            },
          },
        }),
        options: {
          darkModeSelector: '.app-dark'
        }
      },
    })
    .directive('tooltip', Tooltip)
    initializeRouteStore(routes, globals as unknown as SiteGlobals)
  },
)