const getConfigContent = (port) => {
  return `
  import { defineConfig } from 'umi';
  import path from 'path';
  import fs from 'fs';
  import MiniCssExtractPlugin from 'mini-css-extract-plugin'
  import routes from './src/routes'
  import pkg from './package.json'
  let userConfig = {};
  let terserOptions = {};
  let publicPath =  '/' + pkg.name + '/'
  
  if (fs.existsSync(path.resolve(process.cwd(), '.qx.config.js'))) {
    userConfig = require(path.resolve(process.cwd(), '.qx.config.js'))
  }
  
  if (process.env.NODE_ENV === 'development') {
    publicPath = '//localhost:' + ${port} + '/'
  }
  
  if (process.env.UMI_APP_ENV === 'prod') {
    terserOptions = {
      compress: {
        pure_funcs: ['console.log', 'debugger'],
      },
    };
  } else {
    terserOptions = {
      compress: {
        drop_debugger: true,
      },
    };
  }
  
  export default defineConfig({
    esbuild: {},
    devServer: {
      port: ${port},
      'Access-Control-Allow-Origin': true
    },
    runtimePublicPath: true,
    publicPath,
    mountElementId: pkg.name,
    webpack5: {
      lazyCompilation: {},
    },
    nodeModulesTransform: {
      type: 'none',
    },
    history: {
      type: 'hash',
    },
    alias: {
      '@/src': 'src',
    },
    hash: true,
    title: false,
    lessLoader: {
      globalVars: {
        theme: 'true;@import "~@/variable.less"',
      },
    },
    antd: {
      config: {},
    },
    fastRefresh: {},
    qiankun: {
      slave: {},
    },
    dynamicImport: {
      loading: '@/components/qx-page-loading',
    },
    routes,
    terserOptions,
    chainWebpack: function (memo, { env, webpack, createCSSRule }) {
      memo.resolve.alias.set('@', path.resolve(__dirname, './src'));
      memo.resolve.alias.set('@@', path.resolve(__dirname, './src/.umi'));
      memo.optimization.delete('noEmitOnErrors');
      memo.plugins.delete('optimize-css');
      // if (env === 'production') {
        memo.merge({
          plugins: env === 'production'?  [new MiniCssExtractPlugin()] : [],
          optimization: {
            emitOnErrors: true,
            splitChunks: {
              chunks: 'async',
              minSize: 30000,
              minChunks: 3,
              automaticNameDelimiter: '.',
              cacheGroups: {
                antdesigns: {
                  name: 'antdesigns',
                  chunks: 'all',
                  test: /(@antd|antd|@ant-design)/,
                  priority: 10
                },
                x6: {
                  name: 'x6',
                  chunks: 'all',
                  test: /(@antv\\/x6|@antv\\/x6-react-components|@antv\\/x6-react-shape)/,
                  priority: 20,
                },
                qxwidgets: {
                  name: 'qxwidgets',
                  chunks: 'all',
                  test: /\\/src\\/packages\\/qx-form-generator/,
                  priority: 10,
                },
                formrender: {
                  name: 'formrender',
                  chunks: 'all',
                  test: /@qx\\/form-render/,
                  priority: 10,
                },
                qx: {
                  name: 'qx',
                  chunks: 'all',
                  test: /(@qx\\/view-render|@qx\\/form-design|@qx\\/hooks|@qx\\/utils|@qx\\/icon-btn)/,
                  priority: 20,
                },
                echarts: {
                  name: 'echarts',
                  chunks: 'all',
                  test: /(echarts|echarts-for-react)/,
                  priority: 20,
                },
                // styles: {
                //   name: "styles",
                //   type: "css/mini-extract",
                //   chunks: "all",
                //   enforce: true,
                // },
                vendors: {
                  name: 'vendors',
                  chunks: 'all',
                  test: /[\\/]node_modules[\\/]/,
                  priority: 10,
                },
              },
            },
          },
          externals: function ({ context, request }, callback) {
            if (env === 'production') {
              if (/^react$/.test(request)) {
                return callback(null, 'React', 'react');
              }
    
              if (/^react-dom$/.test(request)) {
                return callback(null, 'ReactDOM', 'react-dom');
              }
            }
    
            if (/antd.*.(css|less)$/.test(path.resolve(context, request))) {
              return callback(null, 'antd-style');
            }
    
            callback();
          },
        });  
      // }
    },
    ...userConfig,
  });
  `;
};

module.exports = getConfigContent;