import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import gql from '@rollup/plugin-graphql';
import path from 'path';

const getFlavorConfig = () => {
  switch (process.env.APP_FLAVOR) {
    case 'my-kv':
      return require('./config/prod-my-kv.env.js').default;
    case 'my-dhf':
      return require('./config/prod-dhf.env.js').default;
    case 'my-dha':
      return require('./config/prod-dha.env.js').default;
  }
  return {};
};

function resolve(dir: string) {
  return path.join(__dirname, dir);
}

const define = {
  'import.meta.env.HEP_URL': JSON.stringify(process.env.HEP_URL),
  'import.meta.env.MATOMO_HOST': JSON.stringify(process.env.MATOMO_HOST),
  'import.meta.env.MATOMO_SITE_ID': JSON.stringify(process.env.MATOMO_SITE_ID),
  'import.meta.env.LOGOUT_REDIRECT_URL': JSON.stringify(process.env.LOGOUT_REDIRECT_URL),
  'import.meta.env.VUE_APP_FLAVOR': JSON.stringify(process.env.APP_FLAVOR),
  'import.meta.env.SENTRY_DSN': JSON.stringify(process.env.SENTRY_JAVASCRIPT_DSN),
  'import.meta.env.SENTRY_ENVIRONMENT': JSON.stringify(process.env.SENTRY_ENV),
  /*
   * ENV variables used in JS code need to be stringyfied, as they will be replaced (in place) in the code,
   * and JS needs quotes around strings
   * see https://cli.vuejs.org/guide/mode-and-env.html#using-env-variables-in-client-side-code
   */
  'import.meta.env.VUE_APP_ENABLE_SPELLCHECK': !!process.env.TASKBASE_BASEURL,
};

const flavorConfig = getFlavorConfig();

const htmlPlugin = () => {
  return {
    name: 'html-transform',
    transformIndexHtml(html: string) {
      return html
        .replace(/_APP_TITLE_/, flavorConfig.VUE_APP_TITLE || 'mySkillbox')
        .replace(/_FAVICON_16_/, flavorConfig.VUE_APP_FAVICON_16 || '/static/favicon-16x16.png')
        .replace(/_FAVICON_32_/, flavorConfig.VUE_APP_FAVICON_32 || '/static/favicon-32x32.png');
    },
  };
};

// https://vitejs.dev/config/
export default defineConfig({
  build: {
    assetsDir: 'static',
  },
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: process.env.THEME ? `@import "styles/themes/_${process.env.THEME}.scss";` : '',
      },
    },
    devSourcemap: true,
  },
  resolve: {
    alias: {
      '@': resolve('./src'),
      styles: resolve('./src/styles'),
      gql: resolve('./src/graphql/gql'),
    },
  },
  server: {
    port: 8080,
    hmr: {
      clientPort: 8080,
    },
  },
  plugins: [gql(), vue(), htmlPlugin()],
  define,
});