import { join } from 'path';
import { defineConfig, loadEnv } from 'vite';
import react from '@vitejs/plugin-react';
import { createHtmlPlugin } from 'vite-plugin-html';
import WindiCSS from 'vite-plugin-windicss';
import pkg from '../../../package.json';
import ThemeColor from './theme';

// const globalVendorPackages = ['react', 'react-dom', 'react-router', 'react-router-dom'];

// function renderChunks(deps: Record<string, string>) {
//   const chunks: Record<string, string[]> = {};
//   Object.keys(deps).forEach((key) => {
//     if (globalVendorPackages.includes(key)) return;
//     chunks[key] = [key];
//   });
//   return chunks;
// }

/**
 * @see https://vitejs.dev/config/
 */
export default defineConfig(({ mode }) => {
  return {
    mode: process.env.NODE_ENV,
    root: __dirname,
    plugins: [react(), WindiCSS(), createHtmlPlugin({ inject: { data: { MODE: mode } } })],
    resolve: {
      alias: {
        '@root': join(__dirname, '../../../'),
        '#': join(__dirname, './'),
        '@': join(__dirname, './src'),
        '@easytwin/core': join(__dirname, '../../@easytwin/core/src'),
      },
    },
    css: {
      preprocessorOptions: {
        less: {
          javascriptEnabled: true,
          modifyVars: {
            //
            'primary-color': ThemeColor.base.primary,

            //
            'text-color': ThemeColor.base.textColorBase,
            'text-color-secondary': ThemeColor.base.textColorSecondary,
            'heading-color': ThemeColor.base.textColorBase,

            //
            'border-color-base': ThemeColor.base.borderColorBase,

            //
            'component-background': ThemeColor.base.bgColorMain,
            'component-background-secondary': ThemeColor.base.bgColorSecondary,
            'background-color-base': ThemeColor.base.bgColorBase,
            //
            'input-bg': ThemeColor.base.bgColorMain,
            //
            'checkbox-check-bg': ThemeColor.base.bgColorMain,
            'menu-bg': ThemeColor.base.bgColorMain,
            'menu-inline-submenu-bg': ThemeColor.base.bgColorMain,
            //
            'tooltip-bg': ThemeColor.base.bgColorBase,
            'tooltip-max-width': '680px',
            'tooltip-arrow-color': ThemeColor.base.bgColorTransparent,
            'tooltip-arrow-width': '0px * sqrt(2)',
            //
            'select-background': ThemeColor.base.bgColorMain,
            'select-selection-item-bg': ThemeColor.base.bgColorMain,
            'select-dropdown-bg': ThemeColor.base.bgColorMain,
            //
            'modal-header-bg': ThemeColor.base.bgColorMain,
            'modal-content-bg': ThemeColor.base.bgColorMain,
            //
            'drawer-bg': ThemeColor.base.bgColorMain,

            //
            'font-size-base': '12px',

            //
            'height-base': '32px',
            'height-lg': '40px',
            'height-sm': '28px',
          },
        },
      },
    },
    server: {
      host: pkg.env.VITE_DEV_SERVER_HOST,
      port: pkg.env.VITE_DEV_SERVER_PORT,
      proxy: {
        '/api': {
          target: 'http://twin.easyv.test',
          changeOrigin: true,
        },
        '/login': {
          target: 'http://twin.easyv.test',
          changeOrigin: true,
        },
      },
      open: true,
    },
  };
});