import { createApp, watchEffect } from 'vue';

import { registerAccessDirective } from '@velofex/access';
import { preferences } from '@velofex/preferences';
import { initStores } from '@velofex/stores';
import '@velofex/styles';

import { useTitle } from '@vueuse/core';

import { $t, setupI18n } from '#/locales';

import { initComponentAdapter } from './adapter/component';
import App from './app.vue';
import { router } from './router';

import './styles/global.scss';

async function bootstrap(namespace: string) {
  await initComponentAdapter();

  const app = createApp(App);

  await setupI18n(app);
  await initStores(app, { namespace });

  registerAccessDirective(app);
  app.use(router);

  watchEffect(() => {
    if (preferences.app.dynamicTitle) {
      const routeTitle = router.currentRoute.value.meta?.title;
      const pageTitle =
        (routeTitle ? `${$t(routeTitle)} - ` : '') + preferences.app.name;
      useTitle(pageTitle);
    }
  });

  app.mount('#app');
}

export { bootstrap };