const exec = require("child_process").exec;
const path = require("path");
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const PLUGIN_ID = require("../plugin.json").id;

const NPM_TARGET = process.env.npm_lifecycle_event; //eslint-disable-line no-process-env
const isDev = NPM_TARGET === "debug" || NPM_TARGET === "debug:watch" || NPM_TARGET === 'build:watch';

const plugins = [];
if (NPM_TARGET === "build:watch" || NPM_TARGET === "debug:watch") {
  plugins.push({
    apply: (compiler) => {
      compiler.hooks.watchRun.tap("WatchStartPlugin", () => {
        // eslint-disable-next-line no-console
        console.log("Change detected. Rebuilding webapp.");
      });
      compiler.hooks.afterEmit.tap("AfterEmitPlugin", () => {
        exec("cd .. && make deploy-from-watch", (err, stdout, stderr) => {
          if (stdout) {
            process.stdout.write(stdout);
          }
          if (stderr) {
            process.stderr.write(stderr);
          }
        });
      });
    },
  });
}

const config = {
  entry: [
    "./src/index.tsx",
  ],
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "src"),
    },
    modules: [
      "src",
      "node_modules",
      path.resolve(__dirname),
    ],
    extensions: ["*", ".js", ".jsx", ".ts", ".tsx"],
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx|ts|tsx)$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
          options: {
            cacheDirectory: true,

            // Babel configuration is in babel.config.js because jest requires it to be there.
          },
        },
      },
      {
        test: /\.(scss|css)$/,
        use: [
          "style-loader",
          {
            loader: "css-loader",
          },
          {
            loader: "sass-loader",
            options: {
              sassOptions: {
                includePaths: ["node_modules/compass-mixins/lib", "sass"],
              },
            },
          },
        ],
      },
    ],
  },
  externals: {
    "react": "React",
    "react-dom": "ReactDOM",
    "react-intl": "ReactIntl",
    "redux": "Redux",
    "react-redux": "ReactRedux",
    "react-bootstrap": "ReactBootstrap",
    "react-router-dom": "ReactRouterDom",
    "prop-types": "PropTypes",
    "luxon": "Luxon",
    "styled-components": "StyledComponents",
  },
  output: {
    devtoolNamespace: PLUGIN_ID,
    path: path.join(__dirname, "/dist"),
    publicPath: "/",
    filename: "main.js",
  },
  mode: (isDev) ? "inline-source-map" : "production",
  plugins,
};

if (isDev) {
  Object.assign(config, {
    devServer: {
      // hot: true,
      port: 3004,
    },
    devtool: "inline-source-map",
  });
} else {
  config.optimization = {
    usedExports: true,
    minimizer: [new UglifyJsPlugin()],
  };
  config.stats = 'detailed';
}

module.exports = config;