import { defineConfig, loadEnv } from 'vite'
import react from '@vitejs/plugin-react'
import { visualizer } from 'rollup-plugin-visualizer'
import svgr from 'vite-plugin-svgr'
import { viteStaticCopy } from 'vite-plugin-static-copy'

// https://vitejs.dev/config/
export default defineConfig(({ mode }) => {
  const env = loadEnv(mode, process.cwd())
  return {
    plugins: [
      react(),
      svgr({
        svgrOptions: {
          replaceAttrValues: {
            '#000': 'currentColor',
            '#000000': 'currentColor',
            '#1f1f1f': 'currentColor',
          },
        },
      }),
      viteStaticCopy({
        targets: [
          {
            src: 'node_modules/@mediapipe/tasks-vision/wasm/*',
            dest: 'assets/mediapipe/wasm',
            rename: { stripBase: 4 },
          },
        ],
      }),
      env.VITE_ANALYZE === 'true' &&
        visualizer({
          open: true,
          filename: 'rollup-plugin-visualizer/stats.html',
          gzipSize: true,
          brotliSize: true,
        }),
    ],
    resolve: {
      tsconfigPaths: true,
    },
    build: {
      sourcemap: env.VITE_BUILD_SOURCEMAP === 'true',
    },
    server: {
      port: parseInt(env.VITE_PORT) || 3000,
      host: env.VITE_HOST ?? 'localhost',
      allowedHosts: ['.nip.io'],
      // In a local dev setup, we proxy the media server ourselves to avoid CORS issues
      proxy: {
        '/media': {
          target: 'http://localhost:8083',
          changeOrigin: true,
          secure: false,
        },
      },
    },
  }
})