import { createApp, defineAsyncComponent } from 'vue'
import { createPinia } from 'pinia'
import { Dialog, Quasar, Loading } from 'quasar'
import th from 'quasar/lang/th'

import App from './App.vue'

import quasarUserOptions from './quasar-user-options'

import 'quasar/src/css/index.sass'
import { login } from './services/KeyCloakService'

login().then(async () => {
  const app = createApp(App)
  const pinia = createPinia()

  app.directive(
    'click-outside',
    (await import('@/lib/directives')).clickOutside,
  )

  app.use((await import('./router')).default)
  app.use(pinia)
  app.use(Quasar, {
    ...quasarUserOptions,
    plugins: {
      Dialog,
      Loading,
    },
    lang: th,
  })

  app.component(
    'full-loader',
    defineAsyncComponent(() => import('@/components/FullLoader.vue')),
  )

  app.mount('#app')
})