const path = require('path');
const webpack = require('webpack');

const ExtractCSS = require('mini-css-extract-plugin');
const TerserPlugin = require('terser-webpack-plugin');
const postcssPresetEnv = require('postcss-preset-env');
const postcssTransparencyFix = require('postcss-gradient-transparency-fix');
const { createVariants } = require('parallel-webpack');

const postcssPlugins = [postcssPresetEnv(), postcssTransparencyFix];

const coreConfig = {
  entry: './src/index.js',
  plugins: [
    new ExtractCSS({
      filename: '[name].css',
    }),
    new webpack.DefinePlugin({
      // Segments our babel-only v webpack builds and SSR styles that are attached to each
      _COMPILED_: true,
    }),
  ],
  optimization: {
    minimize: true,
    minimizer: [new TerserPlugin()],
  },
  module: {
    rules: [
      {
        test: /\.js(x?)$/,
        exclude: /node_modules\/(?!@?algolia)/,
        use: {
          loader: 'babel-loader',
          options: {
            extends: './.babelrc',
          },
        },
      },
      {
        test: /\.module\.s(a|c)ss$/,
        use: [
          ExtractCSS.loader,
          {
            loader: 'css-loader',
            options: {
              modules: { localIdentName: '[hash:base64:5]-[local]' },
              importLoaders: 1,
            },
          },
          {
            loader: 'postcss-loader',
            options: { plugins: postcssPlugins },
          },
          'sass-loader',
        ],
      },
      {
        test: /\.s[ac]ss$/,
        exclude: /\.module.(s(a|c)ss)$/,
        use: [
          ExtractCSS.loader,
          {
            loader: 'css-loader',
            options: {
              importLoaders: 1,
            },
          },
          {
            loader: 'postcss-loader',
            options: { plugins: postcssPlugins },
          },
          'sass-loader',
        ],
      },
      {
        test: /\.svg$/,
        exclude: /node_modules/,
        loader: 'svg-react-loader',
        options: {
          jsx: true, // true outputs JSX tags
        },
      },
      {
        test: /\.(jpe?g|png|gif)$/i,
        loader: 'url-loader',
      },
    ],
  },
  resolve: {
    alias: {
      '@ui': path.resolve(__dirname, 'src/ui'),
      '@assets': path.resolve(__dirname, 'assets'),
      '@core': path.resolve(__dirname, 'src/core'),
      '@views': path.resolve(__dirname, 'src/views'),
    },
  },
  externals: {
    react: {
      root: 'React',
      commonjs2: 'react',
      commonjs: 'react',
      amd: 'react',
      umd: 'react',
    },
    'react-dom': {
      root: 'ReactDOM',
      commonjs2: 'react-dom',
      commonjs: 'react-dom',
      amd: 'react-dom',
      umd: 'react-dom',
    },
  },
};

module.exports = createVariants(
  {
    target: [
      { name: 'lib', target: 'commonjs2' },
      { name: 'umd', target: 'umd' },
    ],
  },
  opts => {
    const { name, target } = opts.target;
    return {
      ...coreConfig,
      target: 'node',
      output: {
        globalObject: 'this',
        path: path.resolve(__dirname, `.bundles/${name}`),
        filename: 'index.js',
        libraryTarget: target,
      },
    };
  }
);

module.exports.webpack = coreConfig;
