import vue from "@vitejs/plugin-vue";

import { defineConfig, UserConfig } from "vite";

import AutoImport from "unplugin-auto-import/vite";
import Components from "unplugin-vue-components/vite";
import { ElementPlusResolver } from "unplugin-vue-components/resolvers";

import Icons from "unplugin-icons/vite";
import IconsResolver from "unplugin-icons/resolver";

import { createSvgIconsPlugin } from "vite-plugin-svg-icons";

import UnoCSS from "unocss/vite";

import path from "path";

const pathSrc = path.resolve(__dirname, "src");

// eslint-disable-next-line no-control-regex
const INVALID_CHAR_REGEX = /[\u0000-\u001F"#$&*+,:;<=>?[\]^`{|}\u007F]/g;
const DRIVE_LETTER_REGEX = /^[a-z]:/i;
const DEV_SERVER_PORT = 8080;
const API_BASE = "/hui";

export default defineConfig((): UserConfig => {
  return {
    base: "/",
    resolve: {
      alias: {
        "@": pathSrc,
      },
    },
    css: {
      // CSS preprocessor
      preprocessorOptions: {
        //define global scss variable
        scss: {
          javascriptEnabled: true,
          additionalData: `
            @use "@/styles/variables.scss" as *;
          `,
        },
      },
    },
    server: {
      host: "0.0.0.0",
      port: DEV_SERVER_PORT,
      open: true, // Automatically open browser on start
      proxy: {
        // Reverse proxy for CORS in development
        [API_BASE]: {
          target: "http://127.0.0.1:8081",
          changeOrigin: true,
        },
      },
    },
    plugins: [
      vue(),
      UnoCSS({
        /* options */
      }),
      AutoImport({
        // Auto import Vue helpers: ref, reactive, toRef, etc.
        imports: ["vue", "@vueuse/core"],
        eslintrc: {
          enabled: false, //  Default `false`
          filepath: "./.eslintrc-auto-import.json", // Default `./.eslintrc-auto-import.json`
          globalsPropValue: true, // Default `true`, (true | false | 'readonly' | 'readable' | 'writable' | 'writeable')
        },
        resolvers: [
          // Auto import Element Plus helpers with styles: ElMessage, ElMessageBox, etc.
          ElementPlusResolver(),
          // Auto import icon components
          IconsResolver({}),
        ],
        vueTemplate: true, // Auto import in Vue templates
        dts: path.resolve(pathSrc, "types", "auto-imports.d.ts"), // Type declarations for auto imports; false disables generation
      }),

      Components({
        resolvers: [
          // Auto register icon components
          IconsResolver({
            enabledCollections: ["ep"], // @iconify-json/ep is the Element Plus icon collection
          }),
          // Auto import Element Plus components
          ElementPlusResolver(),
        ],
        dts: path.resolve(pathSrc, "types", "components.d.ts"), // Type declarations for auto components; false disables generation
      }),

      Icons({
        // Auto install icon collections
        autoInstall: true,
      }),

      createSvgIconsPlugin({
        // Icon folders to cache
        iconDirs: [path.resolve(pathSrc, "assets/icons")],
        // symbolId format
        symbolId: "icon-[dir]-[name]",
      }),
    ],
    build: {
      rollupOptions: {
        output: {
          manualChunks(id: string) {
            const normalizedId = id.replaceAll("\\", "/");

            if (!normalizedId.includes("node_modules")) {
              return;
            }

            if (
              normalizedId.includes("echarts") ||
              normalizedId.includes("zrender") ||
              normalizedId.includes("vue-echarts")
            ) {
              return "charts";
            }

            if (
              normalizedId.includes("element-plus") ||
              normalizedId.includes("@element-plus") ||
              normalizedId.includes("@popperjs")
            ) {
              return "element-plus";
            }

            if (
              normalizedId.includes("/vue/") ||
              normalizedId.includes("vue-router") ||
              normalizedId.includes("pinia") ||
              normalizedId.includes("vue-i18n") ||
              normalizedId.includes("@vueuse")
            ) {
              return "vue-core";
            }

            if (
              normalizedId.includes("qrcode.vue") ||
              normalizedId.includes("vuedraggable")
            ) {
              return "ui-extra";
            }

            return "vendor";
          },
          sanitizeFileName(name: string): string {
            // https://github.com/rollup/rollup/blob/master/src/utils/sanitizeFileName.ts
            const match = DRIVE_LETTER_REGEX.exec(name);
            const driveLetter = match ? match[0] : "";

            // A `:` is only allowed as part of a windows drive letter (ex: C:\foo)
            // Otherwise, avoid them because they can refer to NTFS alternate data streams.
            return (
              driveLetter +
              name.slice(driveLetter.length).replace(INVALID_CHAR_REGEX, "")
            );
          },
        },
      },
    },
  };
});