import { createApp, watchEffect } from 'vue';
import gridLayout from 'vue-grid-layout';
import { disAutoConnect } from 'vue-plugin-hiprint';

import '@jnpf/bpmn/style';
import { setupLoadingDirective } from '@jnpf/ui';
import '@jnpf/ui/style';
import '@jnpf/univer/style';
import { mitt } from '@jnpf/utils';
import { registerDraggable, registerResizable } from '@jnpf/ui/modal';

import { registerAccessDirective } from '@vben/access';
import { registerLoadingDirective } from '@vben/common-ui';
import { preferences } from '@vben/preferences';
import { initStores, useUserStore } from '@vben/stores';
import '@vben/styles';
import '@vben/styles/antd';

import { VueQueryPlugin } from '@tanstack/vue-query';
import { useTitle } from '@vueuse/core';

import { registerGlobComp } from '#/components/registerGlobComp';
import { $t, setupI18n } from '#/locales';
import { router } from '#/router';
import { useBaseStore } from '#/store';
import { getJnpfAppEnCode, getJnpfRouteTitle } from '#/utils/jnpf';

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

import '#/design/index.scss';
// 修复打印插件会一直自动连接websocket的问题
disAutoConnect();

const emitter = mitt();

async function bootstrap(namespace: string) {
  // 初始化组件适配器
  await initComponentAdapter();

  const app = createApp(App);

  app.provide('emitter', emitter); // 注入provider

  // 注册v-spinning指令
  registerLoadingDirective(app, {
    spinning: 'spinning',
  });

  // 注册v-draggable指令并启用全局拖拽
  registerDraggable(app);

  // 注册v-resizable指令并启用全局缩放
  registerResizable(app);

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

  // 注册全局组件
  registerGlobComp(app);

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

  // 安装权限指令
  registerAccessDirective(app);

  // 安装loading指令
  setupLoadingDirective(app);

  // 初始化 tippy
  const { initTippy } = await import('@vben/common-ui/es/tippy');
  initTippy(app);

  // 配置路由及路由守卫
  app.use(router);

  // 配置@tanstack/vue-query
  app.use(VueQueryPlugin);

  // 配置Motion插件
  const { MotionPlugin } = await import('@vben/plugins/motion');
  app.use(MotionPlugin);

  // 动态更新标题
  watchEffect(() => {
    const userStore = useUserStore();
    const baseStore = useBaseStore();
    const appEnCode = getJnpfAppEnCode();

    const userInfo = userStore.getUserInfo;
    const { title = '' } = baseStore.getSysConfig;
    let appTitle = title || preferences.app.name;
    if (appEnCode && !['teamwork', 'workFlow'].includes(appEnCode) && userInfo?.systemName) appTitle = userInfo?.systemName;

    if (preferences.app.dynamicTitle) {
      const route = router.currentRoute.value;
      const routeTitle = getJnpfRouteTitle(route.query) || (route?.meta?.i18nCode ? $t(route?.meta?.i18nCode, route?.meta?.title) : route?.meta?.title);
      const pageTitle = routeTitle ? ` ${routeTitle} - ${appTitle} ` : `${appTitle}`;
      useTitle(pageTitle);
    } else {
      useTitle(appTitle);
    }
  });
  app.use(gridLayout);

  app.mount('#app');
}

export { bootstrap };