import { createApp } from 'vue'
import { createHead } from '@unhead/vue'
import { Head } from '@unhead/vue/components'
import { VueQueryPlugin, type VueQueryPluginOptions } from '@tanstack/vue-query'
// import { createPinia } from 'pinia'
import PouchDB from '@/api/PouchDB'

import PrimeVue from 'primevue/config'
import { PrimeVueHereConnectPreset } from './themes/PrimeVueHereConnectPreset'
import './style.css'
import 'primeicons/primeicons.css'

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

const app = createApp(App)

const vueQueryPluginOptions: VueQueryPluginOptions = {
  enableDevtoolsV6Plugin: import.meta.env.DEV,

  queryClientConfig: {
    defaultOptions: {
      queries: {
        refetchOnWindowFocus: false,
        retryOnMount: false,
        retry: false,
      },
    },
  },
}

app.use(createHead())
app.component('MetaHead', Head)
app.use(VueQueryPlugin, vueQueryPluginOptions)
// app.use(createPinia())
app.use(router)
app.use(PrimeVue, {
  theme: {
    preset: PrimeVueHereConnectPreset,
    options: {
      darkModeSelector: 'system',
    },
  },
})

app.mount('#app')

window.PouchDB = PouchDB // it for debug in console only