import './assets/main.css';

import 'virtual:uno.css';

import { createHead } from '@unhead/vue';
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate';

import { DataLoaderPlugin } from 'unplugin-vue-router/data-loaders';
import App from './App.vue';
import { router } from './router';
import { createI18n } from 'vue-i18n';

async function init() {
  if (import.meta.env.MODE === 'development' || 1 === 1) {
    // TODO: https://github.com/hu3dao/vite-plugin-debug/
    // https://eruda.liriliri.io/zh/docs/#快速上手
    await import('eruda').then(({ default: eruda }) => {
      eruda.init({
        defaults: {
          transparency: 0.9,
        },
      });
      // eruda.show();
    });
  }

  const app = createApp(App)
    .use(createHead())
    .use(createPinia().use(piniaPluginPersistedstate))
    // Register the plugin before the router
    .use(DataLoaderPlugin, { router })
    // adding the router will trigger the initial navigation
    .use(router)
    .use(
      // https://vue-i18n.intlify.dev/guide/essentials/started.html#registering-the-i18n-plugin
      createI18n({
        legacy: false, // you must set `false`, to use Composition API
        locale: navigator.language,
        fallbackLocale: 'en',
        messages: {
          en: {
            message: {
              hello: 'hello world',
              greeting: 'good morning, world!',
            },
          },
          ja: {
            message: {
              hello: 'こんにちは、世界',
              greeting: 'おはよう、世界！',
            },
          },
        },
      }),
    );
  app.config.globalProperties.$__DEV__ = $__DEV__;
  app.mount('#app');
}

init();