import { fileURLToPath, URL } from 'node:url'
import { defineConfig, loadEnv } from 'vite'
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
import vue from '@vitejs/plugin-vue'

const path = require('path')
function resolve(dir) {
  return path.join(__dirname, dir);
}

// https://vitejs.dev/config/
export default defineConfig(({ command, mode }) => {
  let API_URL = 'http://127.0.0.1:8001'
  let WEBSOCKET_URL = 'ws://127.0.0.1:8001'
  let PORT = '5173'
  let GRAPHQL_PORT = '8001'

  if (command === 'serve') {
    // dev specific config
    console.log('loading environment variables from .env and .env.' + mode + ' under ' + process.cwd())
    const env = loadEnv(mode, process.cwd());
    API_URL = `${env.VITE_API_URL ?? 'http://127.0.0.1:8001'}`;
    WEBSOCKET_URL = `${env.VITE_WEBSOCKET_URL ?? 'ws://127.0.0.1:8001'}`;
    PORT = `${env.VITE_PORT ?? '5173'}`;
    GRAPHQL_PORT = `${env.VITE_GRAPHQL_PORT ?? '8001'}`;
  } else {
    // command === 'build'
    // build specific config
  }

  console.log('backend api url: ' + API_URL)
  console.log('server port: ' + PORT)
  return {
    plugins: [
      vue(),
      createSvgIconsPlugin({
        iconDirs: [resolve('src/icons')],
        symbolId: 'icon-[name]'
      })
    ],
    resolve: {
      root: resolve('src'),
      alias: {
        '@': fileURLToPath(new URL('./src', import.meta.url)),
        '~bootstrap': resolve('node_modules/bootstrap')
      }
    },
    css: {
      preprocessorOptions: {
        scss: {
          additionalData: `@import "@/assets/styles/main.scss";`
        }
      }
    },
    server: {
      proxy: {
        '^/api/': {
          target: API_URL,
          ws: true,
          changeOrigin: true,
          port: PORT,
        },
        '^/ws/': {
          target: WEBSOCKET_URL,
          ws: true,
          changeOrigin: true,
          port: PORT,
        },
        '^/graphql': {
          target: API_URL,
          ws: true,
          changeOrigin: true,
          port: GRAPHQL_PORT,
        }
      },
    },
    optimizeDeps: {
      esbuildOptions: {
        supported: {
          "top-level-await": true
        },
      },
    },
    esbuild: {
      supported: {
        'top-level-await': true //browsers can handle top-level-await features
      },
    },
    // build: {
    //   chunkSizeWarningLimit: 1500,
    //   rollupOptions: {
    //     output: {
    //       manualChunks(id) {
    //         if (id.includes("node_modules")) {
    //           return id.toString().split("node_modules/")[1].split("/")[0].toString()
    //         }
    //       },
    //       entryFileNames: 'js/[name].[hash].js',
    //       assetFileNames: (assetInfo) => {
    //         if (assetInfo.name.endsWith(".css")) {
    //           return "css/[name]-[hash].css";
    //         }
    //         return "assets/[name]-[hash].[ext]";
    //       },
    //       chunkFileNames: (chunkInfo) => {
    //         const facadeModuleId = chunkInfo.facadeModuleId ? chunkInfo.facadeModuleId.split('/') : [];
    //         const fileName = facadeModuleId[facadeModuleId.length - 2] || '[name]';
    //         return `js/${fileName}/[name].[hash].js`;
    //       },
    //     }
    //   }
    // }
  }
}
)