import { createApp } from 'vue';
import App from './App.vue';
import router from '@/router/router.js';
import { createPinia } from 'pinia';
import 'vuetify/styles';
import { createVuetify } from 'vuetify';
import { aliases, mdi } from 'vuetify/iconsets/mdi-svg';
import { VDialog, VApp, VBtn, VProgressLinear, VProgressCircular, VIcon, VTextField, VSnackbar, VForm, VTextarea, VAlert } from 'vuetify/components';
import { } from 'vuetify/directives';
import vueGoogleOauth from 'vue3-google-login';
import { useAuthStore } from "@/stores/authStore.js";
import { useUserProfileStore } from "@/stores/userProfileStore.js";
import { useCreatorProfileStore } from "@/stores/creatorProfileStore.js";
import Toast, { POSITION } from 'vue-toastification';
import 'vue-toastification/dist/index.css';
import './assets/main.css';

const vuetify = createVuetify({
  components: {
    VDialog, VApp, VBtn, VProgressLinear, VProgressCircular, VIcon, VTextField, VSnackbar, VForm, VTextarea, VAlert
  },
  directives: {
  },
  icons: {
    defaultSet: 'mdi',
    aliases,
    sets: { mdi }
  }
});

import { createI18n } from 'vue-i18n'
import en from '@/locales/en.json'
import fr from '@/locales/fr.json'
import es from '@/locales/es.json'

const i18n = createI18n({
  legacy: false,
  fallbackLocale: 'en',
  messages: {
    en: en,
    fr: fr,
    es: es
  }
})

const pinia = createPinia();

const app = createApp(App)
  .use(pinia)
  .use(vuetify)
  .use(router)
  .use(i18n)
  .use(vueGoogleOauth, {
    clientId: import.meta.env.VITE_GOOGLE_CLIENT_ID,
  })
    .use(Toast, {
        position: POSITION.TOP_CENTER,
    });

useAuthStore();
useUserProfileStore();
useCreatorProfileStore();

app.mount('#app');