import { createApp, defineAsyncComponent } from 'vue'
import App from './App.vue'
import router from './router'
import { Dialog, Notify, Quasar } from 'quasar'
import quasarUserOptions from './quasar-user-options'

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

import '@vuepic/vue-datepicker/dist/main.css'
import http from './plugins/http'
import { createPinia } from 'pinia'

// import './assets/main.css'

const app = createApp(App)
const pinia = createPinia()

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

app.use(
  Quasar,
  {
    plugins: {
      Notify,
      Dialog
    }, // import Quasar plugins and add here
    config: {
      notify: {
        /* look at QuasarConfOptions from the API card */
      }
    },
    lang: th
  },
  quasarUserOptions
)

app.component(
  'data-table',
  defineAsyncComponent(() => import('./components/TableView.vue'))
)
app.component(
  'notifyError',
  defineAsyncComponent(() => import('./components/NotifyError.vue'))
)
app.component(
  'datepicker',
  defineAsyncComponent(() => import('@vuepic/vue-datepicker'))
)
app.component(
  'full-loader',
  defineAsyncComponent(() => import('./plugins/FullLoader.vue'))
)

app.config.globalProperties.$http = http

app.mount('#app')