import { createApp, defineAsyncComponent } from 'vue'
import App from '@/App.vue'
import '@/registerServiceWorker'
import router from '@/router'
import { createPinia } from 'pinia'
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
import { Quasar, Dialog, Notify, Loading } from 'quasar'
import '@vuepic/vue-datepicker/dist/main.css'
import quasarUserOptions from '@/quasar-user-options'

import 'quasar/src/css/index.sass'
import th from 'quasar/lang/th'

import http from '@/plugins/http'

const app = createApp(App)
const pinia = createPinia()
pinia.use(piniaPluginPersistedstate)

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

app.use(Quasar, {
  ...quasarUserOptions,
  plugins: {
    Notify,
    Dialog,
    Loading,
  },
  lang: th,
})

app.component(
  'datepicker',
  defineAsyncComponent(() => import('@vuepic/vue-datepicker'))
)

app.config.globalProperties.$http = http

app.mount('#app')