import { defineConfig, loadEnv } from 'vite';
import vue from '@vitejs/plugin-vue';
import Components from 'unplugin-vue-components/vite';
import AutoImport from 'unplugin-auto-import/vite';
import { AntDesignVueResolver } from 'unplugin-vue-components/resolvers';
import path from 'path';

export default defineConfig(({ mode }) => {
  // 如果没有指定 mode，则默认加载 .env 文件
  const actualMode = mode || '';
  const env = loadEnv(actualMode, process.cwd(), 'VITE_');

  // 读取主题模式
  const themeMode = env.VITE_THEME_MODE || 'default'; // 默认使用 default 主题

  return {
    plugins: [
      vue(),

      Components({
        resolvers: [AntDesignVueResolver()], // 按需加载 Ant Design Vue 组件
        dts: 'src/components.d.ts',
      }),
      // 自动按需导入 Vue API
      AutoImport({
        imports: ['vue', 'vue-router'],
        resolvers: [AntDesignVueResolver()],
        dts: 'src/auto-imports.d.ts',
      }),
    ],
    css: {
      preprocessorOptions: {
        less: {
          javascriptEnabled: true,
          modifyVars: {
            // 动态加载 Ant Design 主题变量
            hack: `true; @import "${path.resolve(
              __dirname,
              `src/styles/theme.${themeMode}.less`,
            )}";`,
          },
        },
      },
    },
    define: {
      // 将环境变量注入到代码中,这样可以使用process.env去获取一些变量
      'process.env': {
        ...env,
      },
    },
    resolve: {
      alias: {
        '@': path.resolve(__dirname, 'src'),
      },
    },
  };
});
