import { unheadVueComposablesImports } from '@unhead/vue';
import { VantResolver } from '@vant/auto-import-resolver';
import Vue from '@vitejs/plugin-vue';
import vueJsx from '@vitejs/plugin-vue-jsx';
import path from 'node:path';
import { fileURLToPath, URL } from 'node:url';
import { pinyin } from 'pinyin-pro';
import type { GetManualChunk } from 'rollup';
import UnoCSS from 'unocss/vite';
import AutoImport from 'unplugin-auto-import/vite';
import { TDesignResolver } from 'unplugin-vue-components/resolvers';
import Components from 'unplugin-vue-components/vite';
import Markdown from 'unplugin-vue-markdown/vite';
import { getPascalCaseRouteName, VueRouterAutoImports } from 'unplugin-vue-router';
import VueRouter from 'unplugin-vue-router/vite';
import { defineConfig, loadEnv } from 'vite';
import cdnImport from 'vite-plugin-cdn-import';
import vueDevTools from 'vite-plugin-vue-devtools';

// https://vitejs.dev/config/
export default defineConfig(({ mode, command }) => {
  const isBuild = command === 'build';
  const env = loadEnv(mode, process.cwd());

  return {
    base: env.VITE_BASE,
    plugins: [
      VueRouter({
        // https://uvr.esm.is/guide/configuration.html
        exclude: ['**/__*', '**/__*/**/*'],
        getRouteName: (routeNode) => getPascalCaseRouteName(routeNode),
        logs: false,
        extensions: ['.vue', '.page.vue', '.md'],
      }),
      // other plugins
      AutoImport({
        resolvers: [
          TDesignResolver({
            library: 'mobile-vue',
            esm: true,
          }),
          VantResolver({
            importStyle: true,
          }),
        ],
        imports: ['pinia', 'vue', VueRouterAutoImports, unheadVueComposablesImports],
      }),
      Components({
        // allow auto load markdown components under `./src/components/`
        extensions: ['vue', 'md'],
        // allow auto import and register components used in markdown
        include: [/\.vue$/, /\.vue\?vue/, /\.md$/],
        resolvers: [
          TDesignResolver({
            library: 'mobile-vue',
            esm: true,
          }),
          VantResolver({
            importStyle: true,
          }),
        ],
      }),
      UnoCSS(),
      Vue({
        include: [/\.vue$/, /\.md$/], // <-- allows Vue to compile Markdown files
      }),
      vueJsx(),
      Markdown({
        headEnabled: true,
      }),
      vueDevTools(),
      cdnImport({
        // https://github.com/mmf-fe/vite-plugin-cdn-import/blob/HEAD/README.zh-CN.md
        modules: ['vue'],
        prodUrl: '//fastly.jsdelivr.net/npm/{name}@{version}/{path}',
        enableInDevMode: true,
      }),
    ],
    define: {
      $__DEV__: JSON.stringify(!isBuild),
    },
    resolve: {
      alias: {
        '@': fileURLToPath(new URL('./src', import.meta.url)),
      },
    },
    build: {
      sourcemap: mode !== 'production' || env.VITE_SOURCE_MAP === 'true',
      rollupOptions: {
        output: {
          // chunkFileNames: 'assets/chunk/[name]_[hash].js',
          // entryFileNames: 'assets/entry/[name]_[hash].js',
          // assetFileNames: 'assets/[ext]/[name]_[hash].[ext]',
          manualChunks: env.VITE_SPLIT_CHUNKS ? createSplitChunk() : undefined,
        },
      },
    },
  };
});

// packages/vite/src/node/plugins/splitVendorChunk.ts
function createSplitChunk(): GetManualChunk {
  return (id /* , { getModuleIds, getModuleInfo } */) => {
    if (isInNodeModules(id) /* && !isCSSRequest(id) */) {
      let pkgName = id;
      pkgName = pkgName.split('.pnpm/')?.[1] || pkgName;
      pkgName = pkgName.split('node_modules/')?.[1] || pkgName;
      pkgName = pkgName.startsWith('@') ? pkgName.split('/')[0] + '/' + pkgName.split('/')[1] : pkgName.split('/')[0];

      if (pkgName.startsWith('@vue/') /* || pkgName === 'vue-demi' */) pkgName = 'vue';
      /* if (pkgName.includes('vue-router')) pkgName = 'vue-router'; */

      return `libs/${pkgName}`;
    } else if (id.includes('src/pages')) {
      let fileName = path
        .basename(id)
        .split('?')[0]
        .replace(/\.\w+$/, '');
      fileName = pinyin(fileName, { type: 'array' }).join('');
      return `pages/${fileName}`;
    }
  };
}

function isInNodeModules(id: string): boolean {
  return id.includes('node_modules');
}
/* const CSS_LANGS_RE = /\.(css|less|sass|scss|styl|stylus|pcss|postcss|sss)(?:$|\?)/;
const isCSSRequest = (request: string): boolean => CSS_LANGS_RE.test(request); */