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'

  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'}`;
  } 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'),
        '~quill': resolve('node_modules/quill'),
      }
    },
    css: {
      preprocessorOptions: {
        scss: {
          additionalData: `@import "@/assets/styles/main.scss";`
        },
        styl: {
          additionalData: ` @import '~quill/dist/quill.core.css';'~quill/dist/quill.bubble.css';'~quill/dist/quill.snow.css';`
        }
      }
    },
    server: {
      proxy: {
        '^/api/': {
          target: API_URL,
          ws: true,
          changeOrigin: true
        },
        '^/ws/': {
          target: WEBSOCKET_URL,
          ws: true,
          changeOrigin: true
        }
      },
      port: PORT,
    },
    optimizeDeps: {
      esbuildOptions: {
        supported: {
          "top-level-await": true
        },
      },
    },
    esbuild: {
      supported: {
        'top-level-await': true //browsers can handle top-level-await features
      },
    }
  }
}
)