import { defineConfig, loadEnv } from "vite";
import { createProxy } from "./vite/proxy";
import { wrapperEnv } from "./vite/utils";
import createVitePlugins from "./vite/plugins";
import { createHtmlPlugin } from 'vite-plugin-html';


import pxtovw from 'postcss-px-to-viewport'
import html from "vite-plugin-html";

const loder_pxtovw = pxtovw({
  viewportWidth: 1920,
  viewportUnit: 'vw'
})


const fs = require("fs");
const path = require("path");

// https://vitejs.dev/config/
export default ({ mode, command }) => {
  const env = loadEnv(mode, process.cwd());
  // The boolean type read by loadEnv is a string. This function can be converted to boolean type
  const viteEnv = wrapperEnv(env);
  const {
    VITE_PORT,
    VITE_BUILD_SOURCEMAP,
    VITE_PROXY,
    VITE_APP_TITLE,
    VITE_BUILD_DROP_CONSOLE,
  } = viteEnv;

  // 全局 scss 资源
  const scssResources: Array<string> = [];
  fs.readdirSync("src/assets/styles/resources").map((dirname) => {
    if (fs.statSync(`src/assets/styles/resources/${dirname}`).isFile()) {
      scssResources.push(`@use "src/assets/styles/resources/${dirname}" as *;`);
    }
  });
  // css 精灵图相关
  fs.readdirSync("src/assets/sprites").map((dirname) => {
    if (fs.statSync(`src/assets/sprites/${dirname}`).isDirectory()) {
      // css 精灵图生成的 scss 文件也需要放入全局 scss 资源
      scssResources.push(`@use "src/assets/sprites/_${dirname}.scss" as *;`);
    }
  });
  return defineConfig({
    base: "./",
    // 开发服务器选项 https://cn.vitejs.dev/config/#server-options
    server: {
      host: "0.0.0.0",
      port: VITE_PORT,
      proxy: createProxy(VITE_PROXY),
    },
    // 构建选项 https://cn.vitejs.dev/config/#server-fsserve-root
    build: {
      outDir: "dist",
      sourcemap: VITE_BUILD_SOURCEMAP,
      minify: false,
      terserOptions: {
        compress: {
          drop_console: VITE_BUILD_DROP_CONSOLE,
        },
      },
    },
    optimizeDeps: {
      include: [
        "element-plus/es",
        "element-plus/es/components/message/style/css",
        "element-plus/es/components/notification/style/css",
        "element-plus/es/components/message-box/style/css",
      ],
    },
    plugins: [
      ...createVitePlugins(env, command === "build"),
      ...createHtmlPlugin({
        minify: true,
        inject: {
          data: {
            title: VITE_APP_TITLE
          },
        }
      }),
      // BUG https://github.com/antfu/unplugin-vue-components/issues/361
    ],
    resolve: {
      alias: {
        "@": path.resolve(__dirname, "src"),
      },
    },
    css: {
      preprocessorOptions: {
        scss: {
          additionalData: scssResources.join(""),
        },
        postcss: {
          plugins: [loder_pxtovw]
        }
      },
    },
  });
};