import App from '@/App.vue'
import '@/assets/main.scss'
import '@/utils/yup-locale'
import router from '@/router'
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import { http } from '@/services/api'
import 'vue3-toastify/dist/index.css'
import Vue3Toastify from 'vue3-toastify'
import { setupMocks } from '@/services/mock'
import { handleError } from '@/utils/error-handler'
import { globalComponents } from '@/utils/global-components'
import { MutationCache, QueryCache, QueryClient, VueQueryPlugin } from '@tanstack/vue-query'

setupMocks(http)

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

Object.entries(globalComponents).forEach(([name, component]) => app.component(name, component))

const queryClient = new QueryClient({
  queryCache: new QueryCache({ onError: (error) => handleError(error) }),
  mutationCache: new MutationCache({ onError: (error) => handleError(error) }),
  defaultOptions: {
    queries: {
      retry: false,
      staleTime: 5 * 60 * 1000,
      refetchInterval: false,
      refetchOnMount: false,
      refetchOnWindowFocus: false,
      gcTime: 5 * 60 * 1000,
    },
  },
})

app.use(VueQueryPlugin, { queryClient })

app.use(Vue3Toastify, {
  theme: 'colored',
  type: 'default',
  position: 'bottom-right',
  autoClose: 1500,
  transition: 'slide',
  rtl: true,
  dangerouslyHTMLString: true,
})

app.use(router).use(pinia).mount('#app')