const webpack = require('webpack');
const WorkBoxPlugin = require('workbox-webpack-plugin');

module.exports = function override(config) {
  // @astryxdesign/core ships as ESM with relative imports missing extensions
  // (e.g. '../Tooltip/Tooltip'), which webpack 5 rejects under strict ESM
  // resolution. Relax it for this package only rather than globally.
  config.module.rules.push({
    test: /\.m?js$/,
    include: /node_modules[\\/]@astryxdesign/,
    resolve: { fullySpecified: false }
  });

  // react-scripts routes all other node_modules JS through
  // babel-preset-react-app/dependencies (a lighter preset than the one used
  // for src/), which doesn't include the import-attributes syntax plugin.
  // @astryxdesign/core's i18n module uses `import x from './en.json' with
  // { type: 'json' }` — the webpack version react-scripts@5 bundles predates
  // native import-attributes support, so even once Babel can *parse* that
  // syntax (via the syntax plugin) it still needs to be stripped from the
  // output, or webpack's own parser trips on the untouched `with {...}`
  // clause in babel-loader's output. Insert a dedicated oneOf rule ahead of
  // the generic node_modules js/mjs rule — oneOf rules are mutually
  // exclusive (first match wins), so the generic rule won't also try to
  // process these files.
  const stripImportAttributes = () => ({
    visitor: {
      ImportDeclaration(path) {
        if (path.node.attributes) path.node.attributes = [];
        if (path.node.assertions) path.node.assertions = [];
      }
    }
  });
  const oneOfRule = config.module.rules.find((rule) => Array.isArray(rule.oneOf));
  if (oneOfRule) {
    oneOfRule.oneOf.unshift({
      test: /\.m?js$/,
      include: /node_modules[\\/]@astryxdesign/,
      resolve: { fullySpecified: false },
      loader: require.resolve('babel-loader'),
      options: {
        babelrc: false,
        configFile: false,
        compact: false,
        presets: [[require.resolve('babel-preset-react-app/dependencies'), { helpers: true }]],
        plugins: [require.resolve('@babel/plugin-syntax-import-attributes'), stripImportAttributes],
        cacheDirectory: true,
        cacheCompression: false
      }
    });
  }

  config.resolve.fallback = {
    process: require.resolve('process/browser'),
    // zlib: require.resolve('browserify-zlib'),
    stream: require.resolve('stream-browserify'),
    crypto: require.resolve('crypto-browserify'),
    util: require.resolve('util'),
    buffer: require.resolve('buffer')
    // asset: require.resolve('assert')
  };

  // https://stackoverflow.com/questions/69135310/workaround-for-cache-size-limit-in-create-react-app-pwa-service-worker
  config.plugins.forEach((plugin) => {
    if (plugin instanceof WorkBoxPlugin.InjectManifest) {
      plugin.config.maximumFileSizeToCacheInBytes = 50 * 1024 * 1024;
    }
  });

  config.plugins = [
    ...config.plugins,
    new webpack.ProvidePlugin({
      process: 'process/browser.js',
      Buffer: ['buffer', 'Buffer']
    })
  ];

  return config;
};