'use strict'

process.env.NODE_ENV = process.env.NODE_ENV || 'development'

const path = require('path')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')

const LOCAL_IDENT_NAME = '[name]_[local]'
// style files regexes
const CSS_REGEX = /\.css$/
const CSS_MODULE_REGEX = /\.module\.css$/
const SCSS_REGEX = /\.scss$/
const SCSS_MODULE_REGEX = /\.module\.scss$/

const getSassLoader = (cssOptions) => ({
  loader: require.resolve('sass-loader'),
  options: {
    sourceMap: cssOptions.sourceMap,
    implementation: require('sass'),
  },
})

const getStyleLoaders = (cssOptions, preprocesser) => {
  const loaders = [
    MiniCssExtractPlugin.loader,
    {
      loader: require.resolve('css-loader'),
      options: cssOptions,
    },
    {
      loader: require.resolve('postcss-loader'),
      options: {
        sourceMap: cssOptions.sourceMap,
      },
    },
  ]

  if (preprocesser) {
    loaders.push(getSassLoader(cssOptions))
  }

  return loaders
}

const isDev = process.env.NODE_ENV === 'development'

const stats = {
  children: false,
  colors: true,
  modules: false,
  timings: true,
}

module.exports = {
  mode: isDev ? 'development' : 'production',

  devtool: isDev ? 'cheap-module-source-map' : 'source-map',

  context: path.resolve(__dirname, 'client'),

  entry: {
    app: './index.js',
  },

  output: {
    path: path.resolve('./dist'),
    filename: '[name].js',
  },

  resolve: {
    extensions: ['.js', '.jsx', '.mjs', '.json'],
    mainFields: ['module', 'jsnext:main', 'browser', 'main'],
  },

  module: {
    rules: [
      {
        loader: 'babel-loader',
      },
      {
        test: SCSS_MODULE_REGEX,
        use: getStyleLoaders(
          {
            importLoaders: 2,
            sourceMap: true,
            modules: {
              localIdentName: LOCAL_IDENT_NAME,
            },
          },
          true,
        ),
      },
      {
        test: SCSS_REGEX,
        exclude: SCSS_MODULE_REGEX,
        use: getStyleLoaders(
          {
            sourceMap: true,
            importLoaders: 2,
          },
          true,
        ),
      },
      {
        test: CSS_MODULE_REGEX,
        use: getStyleLoaders(
          {
            sourceMap: true,
            importLoaders: 1,
            modules: {
              localIdentName: LOCAL_IDENT_NAME,
            },
          },
          false,
        ),
      },
      {
        test: CSS_REGEX,
        exclude: CSS_MODULE_REGEX,
        use: getStyleLoaders(
          {
            sourceMap: true,
            importLoaders: 1,
          },
          false,
        ),
      },
      {
        test: /\.(xml|html|txt|md)$/,
        use: 'raw-loader',
      },
    ],
  },

  stats,

  optimization: {
    splitChunks: {
      cacheGroups: {
        styles: {
          name: 'styles',
          test: /\.css$/,
          chunks: 'all',
          enforce: true,
        },
      },
    },
  },

  plugins: [
    new MiniCssExtractPlugin({
      filename: '[name].css',
    }),
  ],

  devServer: {
    host: '0.0.0.0',
    port: 1337,
    contentBase: path.resolve('./static'),
    stats,
  },
}