// Development config
const merge = require("webpack-merge");
const webpack = require("webpack");
const FaviconsWebpackPlugin = require("favicons-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");

const commonConfig = require("./common.js");

module.exports = function (env, argv) {
  const base = commonConfig(env, argv);
  base.mode = "development";
  base.entry = [
    "react-hot-loader/patch", // Activate HMR for React
    "webpack-dev-server/client?http://0.0.0.0:3000", // Bundle the client for webpack-dev-server and connect to the provided endpoint
    "webpack/hot/only-dev-server", // Bundle the client for hot reloading, only- means to only hot reload for successful updates
    "./index.tsx" // The entry point of our app
  ];
  base.devServer = {
    hot: true, // Enable HMR on the server
    historyApiFallback: true,
    host: '0.0.0.0',
    port: '3000',
    allowedHosts: [
      '.sik.party',
      '.sahkoinsinoorikilta.fi',
    ],
  };
  base.devtool = "cheap-module-eval-source-map";
  base.plugins = base.plugins.concat([
    new FaviconsWebpackPlugin({
      logo: "./assets/img/favicon.png",
      prefix: "assets/icons/",
      icons: {
        android: false,
        appleIcon: false,
        appleStartup: false,
        coast: false,
        favicons: true,
        firefox: false,
        opengraph: false,
        twitter: false,
        yandex: false,
        windows: false
      }
    }),
    new webpack.HotModuleReplacementPlugin(), // Enable HMR globally
    new webpack.NamedModulesPlugin(), // Prints more readable module names in the browser console on HMR updates
    new HtmlWebpackPlugin({template: "index.html.ejs"}),
  ]);

  base.module.rules.push({
    test: /\.css$/,
    use: ["style-loader", {loader: "css-loader", options: {importLoaders: 1}}, "postcss-loader"]
  });
  base.module.rules.push({
    test: /\.scss$/,
    loaders: [
      "style-loader",
      {loader: "css-loader", options: {importLoaders: 1}},
      "postcss-loader",
      {
        loader: 'sass-loader',
        options: {
          // Prefer `dart-sass`
          implementation: require('sass'),
        },
      },
    ]
  });

  return base;
};