import './assets/main.css'

import { createApp } from 'vue'
import { createPinia } from 'pinia'

import App from './App.vue'
import router from './router'

// Vuetify
import 'vuetify/styles'
import '@mdi/font/css/materialdesignicons.css'
import { createVuetify } from 'vuetify'
import axios from 'axios'
import zitadelAuth from '@/services/zitadelAuth'
import { apiBaseURL } from './types/ConfigSymbols'

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

// Stuff to get OIDC auth working through Zitadel
declare module 'vue' {
  interface ComponentCustomProperties {
    $zitadel: typeof zitadelAuth
  }
}

zitadelAuth.oidcAuth.startup().then(() => {
  const app = createApp(App)
  const pinia = createPinia()

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

  app.config.globalProperties.$zitadel = zitadelAuth
  
  // Fetch my config
  axios
    .get('/config.json?noCache=' + Date.now())
    .then((resp) => {
      app.provide(apiBaseURL, resp.data.apiBaseURL)
  
      app.mount('#app')
    })
    .catch((err) => {
      console.log(err)
    })
})
