import { createApp } from 'vue'
import App from './App.vue'
import router from './router';
import { createPinia } from 'pinia'
import storageService from '@/services/storageService';
import { IonicVue } from '@ionic/vue';

/* Core CSS required for Ionic components to work properly */
import '@ionic/vue/css/core.css';

/* Basic CSS for apps built with Ionic */
import '@ionic/vue/css/normalize.css';
import '@ionic/vue/css/structure.css';
import '@ionic/vue/css/typography.css';

/* Optional CSS utils that can be commented out */
import '@ionic/vue/css/padding.css';
import '@ionic/vue/css/float-elements.css';
import '@ionic/vue/css/text-alignment.css';
import '@ionic/vue/css/text-transformation.css';
import '@ionic/vue/css/flex-utils.css';
import '@ionic/vue/css/display.css';

/**
 * Ionic Dark Mode
 * -----------------------------------------------------
 * For more info, please see:
 * https://ionicframework.com/docs/theming/dark-mode
 */
import '@ionic/vue/css/palettes/dark.class.css';

/* Theme variables */
import './theme/variables.css';
import './theme/components/index.css'

import { VueReCaptcha } from 'vue-recaptcha-v3'

// Above the createApp() line
import { defineCustomElements } from '@ionic/pwa-elements/loader';
import VCalendar from 'v-calendar';
import 'v-calendar/style.css';
import { initNetworkService } from '@/services/offline/networkService';
import { initSyncService } from '@/services/offline/syncService';
import { useOfflineStore } from '@/stores/offlineStore';

defineCustomElements(window);

const app = createApp(App);
app.provide('storage', storageService);

app.use(VueReCaptcha, {
  siteKey: import.meta.env.VITE_RECAPTCHA_SITE_KEY,
  loaderOptions: {
    useRecaptchaNet: true,
    autoHideBadge: true
  }
})

app.use(IonicVue)
  .use(router)
  .use(createPinia());
  app.use(VCalendar, {});

router.isReady().then(async () => {
  await initNetworkService();
  await initSyncService();
  app.mount('#app');
  useOfflineStore().init();
}).catch(error => {
  console.error('Error initializing router:', error);
});