import type { NavigationGuardNext, RouteLocationNormalized } from 'vue-router';
import { useNProgress } from '@vueuse/integrations/useNProgress';
import { createRouter, createWebHistory } from 'vue-router';
import { LOGIN_URL, ROUTER_WHITE_LIST } from '@/config';
import { errorRouter, layoutRouter, staticRouter } from '@/routers/modules/staticRouter';
import { useUserStore } from '@/stores';

const { start, done } = useNProgress(0, {
  showSpinner: false,
  trickleSpeed: 200,
  minimum: 0.3,
  easing: 'ease',
  speed: 500,
});

const router = createRouter({
  history: createWebHistory(),
  routes: [...layoutRouter, ...staticRouter, ...errorRouter],
  strict: false,
  scrollBehavior: () => ({ left: 0, top: 0 }),
});

// 路由前置守卫
router.beforeEach(
  async (
    to: RouteLocationNormalized,
    _from: RouteLocationNormalized,
    next: NavigationGuardNext,
  ) => {
    const userStore = useUserStore();

    // 1、NProgress 开始
    start();

    // 2、标题
    document.title = (to.meta.title as string) || (import.meta.env.VITE_WEB_TITLE as string);

    // 3、判断是访问登录页
    if (to.path === LOGIN_URL) {
      // 已登录，跳转到首页
      if (userStore.token) {
        return next('/');
      }
      // 未登录，显示登录页
      return next();
    }

    // 4、判断访问页面是否在路由白名单中，如果存在直接放行
    if (ROUTER_WHITE_LIST.includes(to.path))
      return next();

    // 5、判断是否有 Token，没有重定向到登录页面
    if (!userStore.token) {
      // 保存当前要访问的页面路径，登录后跳转
      return next({
        path: LOGIN_URL,
        query: { redirect: to.fullPath },
      });
    }

    // 6、正常访问页面
    next();
  },
);

// 路由跳转错误
router.onError((error) => {
  // 结束全屏动画
  done();
  console.warn('路由错误', error.message);
});

// 后置路由
router.afterEach(() => {
  // 结束全屏动画
  done();
});

export default router;
