var path = require('path');
var webpack = require('webpack');
var MiniCssExtractPlugin = require('mini-css-extract-plugin');
var HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = (env, argv) => {
    const isDevServer = (env || {}).devServer === true;
    const runInContainer = (env || {}).runInContainer === true;
    const isDevelopment = argv.mode === 'development';
    const outputDirectory = isDevServer ? "dist-dev" : "dist";
    const entries = {};
    entries[`${outputDirectory}/engine`] = "./src/engine.jsx";
    entries[`${outputDirectory}/engineStyle`] = "./src/engineStyle.js";

    const statsConfig = {
        builtAt: true,
        children: false,
        chunks: false,
        chunkGroups: false,
        chunkModules: false,
        chunkOrigins: false,
        colors: true,
        entrypoints: true,
    }

    const devServerSettings = {
        port: 8000,
        publicPath: `/`,
        stats: statsConfig,
    };

    // By default, the webpack-dev-server is not exposed outside of localhost.
    // When running in a container we need it accessible externally.
    if (runInContainer) {
        devServerSettings.disableHostCheck = true;
        devServerSettings.host = '0.0.0.0';
        devServerSettings.watchOptions = {
            poll: true,
        }
    }

    return {
        plugins: [
            new webpack.DefinePlugin({
                'process.env.NODE_ENV': isDevelopment ? "\"development\"" : "\"production\"",
            }),
            // http://stackoverflow.com/questions/29080148/expose-jquery-to-real-window-object-with-webpack
            new webpack.ProvidePlugin({
                // Automtically detect jQuery and $ as free var in modules
                // and inject the jquery library
                // This is required by many jquery plugins
                jquery: "jquery",
                jQuery: "jquery",
                $: "jquery",
            }),
            new HtmlWebpackPlugin({
                title: "Bitburner" + (isDevelopment ? ' - development' : ""),
                template: "src/index.html",
                favicon: "favicon.ico",
                googleAnalytics: {
                    trackingId: 'UA-100157497-1',
                },
                meta: {},
                minify: isDevelopment ? false : {
                    collapseBooleanAttributes: true,
                    collapseInlineTagWhitespace: false,
                    collapseWhitespace: false,
                    conservativeCollapse: false,
                    html5: true,
                    includeAutoGeneratedTags: false,
                    keepClosingSlash: true,
                    minifyCSS: false,
                    minifyJS: false,
                    minifyURLs: false,
                    preserveLineBreaks: false,
                    preventAttributesEscaping: false,
                    processConditionalComments: false,
                    quoteCharacter: "\"",
                    removeAttributeQuotes: false,
                    removeComments: false,
                    removeEmptyAttributes: false,
                    removeEmptyElements: false,
                    removeOptionalTags: false,
                    removeScriptTypeAttributes: false,
                    removeStyleLinkTypeAttributes: false,
                    removeTagWhitespace: false,
                    sortAttributes: false,
                    sortClassName: false,
                    useShortDoctype: false,
                },
            }),
            new MiniCssExtractPlugin({
                filename: "[name].css",
            }),
        ],
        target: "web",
        entry: entries,
        devtool: "source-map",
        output: {
            path: path.resolve(__dirname, "./"),
            filename: "[name].bundle.js",
        },
        module: {
            rules: [
                {
                    test: /\.tsx?$/,
                    loader: 'ts-loader',
                    exclude: /node_modules/,
                },
                {
                    test: /\.(jsx)$/,
                    exclude: /node_modules/,
                    use: {
                      loader: "babel-loader",
                    },
                },
                {
                    test: /\.s?css$/,
                    use: [
                        MiniCssExtractPlugin.loader,
                        "css-loader",
                        "sass-loader",
                    ],
                },
            ],
        },
        optimization: {
            removeAvailableModules: true,
            removeEmptyChunks: true,
            mergeDuplicateChunks: true,
            flagIncludedChunks: true,
            occurrenceOrder: true,
            sideEffects: true,
            providedExports: true,
            usedExports: true,
            concatenateModules: false,
            namedModules: false,
            namedChunks: false,
            minimize: !isDevelopment,
            portableRecords: true,
            splitChunks: {
                cacheGroups: {
                    vendor: {
                        test: /[\\/]node_modules[\\/]/,
                        name: `${outputDirectory}/vendor`,
                        chunks: 'all',
                    },
                },
            },
        },
        devServer: devServerSettings,
        resolve: {
            extensions: [
                ".tsx",
                ".ts",
                ".js",
                ".jsx",
            ],
        },
        stats: statsConfig,
    };
};