import legacy from '@vitejs/plugin-legacy';
import react from '@vitejs/plugin-react';
import { createRequire } from 'module';
import { defineConfig, transformWithEsbuild } from 'vite';
import { promises as fsPromises } from 'fs';
import * as url from 'url';
import * as path from 'path';
import { nodePolyfills } from 'vite-plugin-node-polyfills';
import {
  AndDesignVueResolve,
  AntdResolve,
  createStyleImportPlugin,
  ElementPlusResolve,
  NutuiResolve,
  VantResolve,
} from 'vite-plugin-style-import';

process.env.VITE_APP_GIT_SHA_DATE = new Date().toLocaleString('en-US', {
  timeZone: 'America/Los_Angeles',
});

const WRONG_CODE = `import { bpfrpt_proptype_WindowScroller } from "../WindowScroller.js";`;
function reactVirtualized() {
  return {
    name: 'flat:react-virtualized',
    configResolved: async () => {
      const require = createRequire(import.meta.url);
      const reactVirtualizedPath = require.resolve('react-virtualized');
      const { pathname: reactVirtualizedFilePath } = new url.URL(
        reactVirtualizedPath,
        import.meta.url
      );
      const file = reactVirtualizedFilePath.replace(
        path.join('dist', 'commonjs', 'index.js'),
        path.join('dist', 'es', 'WindowScroller', 'utils', 'onScroll.js')
      );
      const code = await fsPromises.readFile(file, 'utf-8');
      const modified = code.replace(WRONG_CODE, '');
      await fsPromises.writeFile(file, modified);
    },
  };
}

export default defineConfig({
  base: '/',
  plugins: [
    // {
    //     name: 'treat-js-files-as-jsx',
    //     async transform(code, id) {
    //         if (!id.match(/src\/.*\.js$/)) return null

    //         return transformWithEsbuild(code, id, {
    //             loader: 'jsx',
    //             jsx: 'automatic',
    //         })
    //     },
    // },
    reactVirtualized(),
    react(),
    // nodePolyfills({
    //     protocolImports: true,
    //     overrides: {
    //         // Since `fs` is not supported in browsers, we can use the `memfs` package to polyfill it.
    //         fs: 'memfs',
    //         // Since `path` is not supported in browsers, we can use the `path-browserify` package to polyfill it.
    //         path: 'path-browserify',
    //         // Since `os` is not supported in browsers, we can use the `os-browserify` package to polyfill it.
    //         os: 'os-browserify/browser',
    //         // Since `crypto` is not supported in browsers, we can use the `crypto-browserify` package to polyfill it.
    //         crypto: 'crypto-browserify',
    //         // Since `stream` is not supported in browsers, we can use the `stream-browserify` package to polyfill it.
    //         stream: 'stream-browserify',
    //         // Since `buffer` is not supported in browsers, we can use the `buffer` package to polyfill it.

    //     }
    // }),
    // createStyleImportPlugin({
    //     resolves: [
    //         AndDesignVueResolve(),
    //         VantResolve(),
    //         ElementPlusResolve(),
    //         NutuiResolve(),
    //         AntdResolve(),
    //     ],
    //     libs: [
    //         {
    //             libraryName: 'ant-design-vue',
    //             esModule: true,
    //             resolveStyle: (name) => {
    //                 return `ant-design-vue/es/${name}/style/index`
    //             },
    //         },
    //     ]
    // }),
    // legacy({
    //     targets: ['defaults']
    // }),
  ],
  // css: {
  //     preprocessorOptions: {
  //         less: {
  //             javascriptEnabled: true,
  //             modifyVars: {
  //                 ...v4Token,
  //             },

  //         }
  //     }
  // },
  server: {
    host: true,
    port: 3000,
    open: true,
  },
  optimizeDeps: {
    // force: true,
    esbuildOptions: {
      loader: {
        '.js': 'jsx',
      },
    },
  },
  // build: {
  //     outDir: 'build',
  //     // manifest: true,
  //     // sourcemap: true,
  //     // rollupOptions: {
  //     //     external: ['antd'],
  //     // },
  // }
});