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

import PrimeVue from 'primevue/config'
import { definePreset } from '@primevue/themes'
import Aura from '@primevue/themes/aura'
import './style.css'
import 'primeicons/primeicons.css'

const MyPreset = definePreset(Aura, {
  semantic: {
    primary: {
      50: '{rose.50}',
      100: '{rose.100}',
      200: '{rose.200}',
      300: '{rose.300}',
      400: '{rose.400}',
      500: '{rose.500}',
      600: '{rose.600}',
      700: '{rose.700}',
      800: '{rose.800}',
      900: '{rose.900}',
      950: '{rose.950}',
    },
  },
})

import App from './App.vue'
import router from './router'
import { registerServiceWorker } from '@/registerServiceWorker'

const app = createApp(App)

const vueQueryPluginOptions: VueQueryPluginOptions = {
  enableDevtoolsV6Plugin: import.meta.env.DEV,
  queryClientConfig: {
    defaultOptions: {
      queries: {
        refetchOnWindowFocus: false,
        retryOnMount: false,
        retry: false,
      },
    },
  },
}

const head = createHead()
app.use(head)
app.use(VueQueryPlugin, vueQueryPluginOptions)
// app.use(createPinia())
app.use(router)
app.use(PrimeVue, {
  theme: {
    preset: MyPreset,
    options: {
      darkModeSelector: false,
    },
  },
})

app.mount('#app')

registerServiceWorker()
  .then(() => console.log('Service Worker успешно зарегистрирован'))
  .catch(console.error)

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