import './assets/main.css'

import { createApp } from 'vue'
import { createPinia } from 'pinia'
// Vuetify
import 'vuetify/styles'
import '@mdi/font/css/materialdesignicons.css'
import { createVuetify } from 'vuetify'

import App from './App.vue'
import { apiBaseURL, oidc } from './types/ConfigSymbols'
import { configureOidc } from './services/authentikAuth'
import router from './router'
import { getConfig } from './services/siteConfig'
import type { Config } from './types/Config'

const vuetify = createVuetify({
  icons: {
    defaultSet: 'mdi'
  },
  theme: {
    defaultTheme: 'dark'
  }
})

const conf: Config = await getConfig().then((c: Config | null): Config => {
  if (c === null) {
    throw new Error("config was null")
  }
  return c
}).catch((reason) => {
  console.log(reason)
  throw new Error(reason);
})

const authentikAuth = await configureOidc()
authentikAuth.startup().then((ok: boolean) => {
  if (ok) {
    const app = createApp(App)
    const pinia = createPinia()

    app.use(router)
    app.use(vuetify)
    app.use(pinia)

    app.provide(oidc, authentikAuth)

    app.provide(apiBaseURL, conf.apiBaseURL)

    app.mount('#app')
  }
})
