import { createApp } from 'vue';
import { createI18n } from 'vue-i18n';

import './style.css';

import '@fontsource/noto-sans';

import 'primevue/resources/themes/saga-blue/theme.css';
// import 'primevue/resources/themes/arya-blue/theme.css';
import 'primevue/resources/primevue.min.css';
import 'primeicons/primeicons.css';

import PrimeVue from 'primevue/config';
import ConfirmationService from 'primevue/confirmationservice';
import superagent from 'superagent';

import LogsViewer from './components/LogsViewer.vue';

const translations = {};
const i18n = createI18n({
    locale: 'en', // set locale
    fallbackLocale: 'en', // set fallback locale
    messages: translations
});

// https://vue-i18n.intlify.dev/guide/advanced/lazy.html
(async function loadLanguages() {
  const API_ORIGIN = import.meta.env.VITE_API_ORIGIN ? 'https://' + import.meta.env.VITE_API_ORIGIN : '';

  async function loadLanguage(lang) {
    try {
      const result = await superagent.get(`${API_ORIGIN}/translation/${lang}.json`);

      // we do not deliver as application/json :/
      translations[lang] = JSON.parse(result.text);
    } catch (e) {
      console.error(`Failed to load language file for ${lang}`, e);
    }
  }

  await loadLanguage('en');

  const locale = window.localStorage.NG_TRANSLATE_LANG_KEY;
  if (locale && locale !== 'en') {
    await loadLanguage(locale);

    if (i18n.mode === 'legacy') {
      i18n.global.locale = locale;
    } else {
      i18n.global.locale.value = locale;
    }
  }

  const app = createApp(LogsViewer);

  app.use(i18n);
  app.use(PrimeVue, { ripple: true });
  app.use(ConfirmationService);

  app.mount('#app');
})();