// 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',
    ],
    proxy: {
      '/api': {
        target: 'http://localhost:8000',
        secure: false,
      },
    },
    // clientLogLevel: 'none',
    // https: settings.dev_server.https,
    // host: settings.dev_server.host,
    // port: settings.dev_server.port,
    // contentBase: output.path,
    // public: settings.dev_server.public,
    // publicPath: output.publicPath,
    // compress: true,
    // headers: { 'Access-Control-Allow-Origin': '*' },
    // historyApiFallback: true,
    // watchOptions: {
    //   ignored: /node_modules/
    // }
  };
  base.devtool = "cheap-module-eval-source-map";
  base.plugins = base.plugins.concat([
    new FaviconsWebpackPlugin({
      logo: "./assets/img/favicon.png",
      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",
      "sass-loader"
    ]
  });

  return base;
};