import { createApp, watchEffect } from 'vue';

import { $t } from '@vben/locales';
import { preferences } from '@vben/preferences';
import '@vben/styles';
import '@vben/styles/antd';

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

import initAdapter from './adapter/setup';
import App from './App.vue';
import initDirective from './directive/setup';
import initI18n from './locales/setup';
import initRouter from './router';
import initStores from './stores';

export default async function bootstrap(space: string) {
  const app = createApp(App);

  // 国际化 i18n 配置
  await initI18n(app);

  // 适配器初始化（组件、表单组件）
  await initAdapter(app);

  // 注册指令
  await initDirective(app);

  // 配置 pinia-tore
  await initStores(app, { namespace: space });

  // 配置路由及守卫
  const router = await initRouter(app);

  // 初始化 tippy
  const { initTippy } = await import('@vben/common-ui/es/tippy');
  initTippy(app);
  // 配置Motion插件
  const { MotionPlugin } = await import('@vben/plugins/motion');
  app.use(MotionPlugin);

  // 动态更新标题
  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');
}