var path = require('path')
var webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin');
const meteorExternals = require('webpack-meteor-externals');
const VueLoaderPlugin = require('vue-loader/lib/plugin');

const UglifyJsPlugin = require('uglifyjs-webpack-plugin');

const GitRevisionPlugin = require('git-revision-webpack-plugin');
const gitRevisionPlugin = new GitRevisionPlugin();

const { gitDescribe, gitDescribeSync } = require('git-describe');

const gitInfo = gitDescribeSync(__dirname, {
    longSemver: true,
    dirtySemver: false
});

const clientConfig = {
    entry: './client/main.js',
    // output: {
    //   publicPath: '/',
    //   filename: 'build.js'
    // },
    output: {
        publicPath: '/',
        filename: '[name].[hash].js',
    },
    mode: "production",
    optimization: {
        runtimeChunk: 'single',
        // minimizer: [new UglifyJsPlugin()],
        // minimize: false,
        splitChunks: {
            chunks: 'all',
            maxInitialRequests: Infinity,
            minSize: 0,
            cacheGroups: {
                vendor: {
                    test: /[\\/]node_modules[\\/]/,
                    name(module) {
                        // get the name. E.g. node_modules/packageName/not/this/part.js
                        // or node_modules/packageName
                        const packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1];

                        // npm package names are URL-safe, but some servers don't like @ symbols
                        return `npm.${packageName.replace('@', '')}`;
                    },
                },
            },
        },
    },
    module: {
        rules: [{
                test: /\.js$/,
                loader: 'babel-loader',
                exclude: /node_modules/,
                options: {
                    plugins: [
                        "@babel/plugin-syntax-dynamic-import"
                    ]
                }
            },
            {
                test: /\.vue$/,
                loader: 'vue-loader',
                options: {
                    compilerOptions: {
                        modules: [{
                            preTransformNode(astEl) {
                                if (process.env.NODE_ENV === "production") {
                                    const { attrsMap, attrsList } = astEl;
                                    if (attrsMap["data-cy"]) {
                                        delete attrsMap["data-cy"];
                                        const index = attrsList.findIndex(x => x.name === 'data-cy')
                                        attrsList.splice(index, 1);
                                    }
                                }
                                return astEl;
                            }
                        }]
                    }
                    // other vue-loader options go here
                }
            },
            {
                test: /\.s(c|a)ss$/,
                use: [
                    'vue-style-loader',
                    'css-loader',
                    {
                        loader: 'sass-loader',
                        options: {
                            implementation: require('sass'),
                            fiber: require('fibers'),
                            indentedSyntax: true // optional
                        }
                    }
                ]
            },
            {
                test: /\.less$/,
                use: [
                    'vue-style-loader',
                    'css-loader',
                    'less-loader'
                ]
            },
            {
                test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
                use: [{
                    loader: 'file-loader',
                    options: {
                        name: '[name].[ext]',
                        outputPath: 'fonts/'
                    }
                }]
            },
            {
                test: /\.css$/,
                use: [
                    'vue-style-loader',
                    'css-loader'
                ],
            },
            {
                test: /\.(png|jpg|gif|svg)$/,
                loader: 'file-loader',
                options: {
                    name: 'images/[name].[ext]?[hash:8]'
                }
            },
            {
                test: /\.html$/,
                use: [
                    // {
                    //     loader: "file-loader",
                    //     options: {
                    //         name: "[name].html"
                    //     }
                    // },
                    // {
                    //     loader: "extract-loader"// tells webpack to not include html file into mainbundle js
                    // },
                    {
                        loader: "html-loader",
                        options: {
                            attrs: ["img:src"] // the src attribute in img element of html is the target
                        }
                    }
                ]
            },

        ]
    },
    resolve: {
        alias: {
            'vue$': 'vue/dist/vue.esm.js'
        },
        extensions: ['*', '.js', '.vue', '.json']
    },
    externals: [meteorExternals()],
    devServer: {
        historyApiFallback: true,
        noInfo: true,
        overlay: true,
        hot: true,
        open: true
    },
    performance: {
        hints: false
    },
    devtool: process.env.NODE_ENV == 'production' ? '' : 'source-map',
    plugins: [
        new webpack.HotModuleReplacementPlugin(),
        new HtmlWebpackPlugin({
            template: './client/main.html'
        }),
        new VueLoaderPlugin(),
        new webpack.DefinePlugin({
            // 'VERSION': JSON.stringify(gitRevisionPlugin.version()),
            // 'COMMITHASH': JSON.stringify(gitRevisionPlugin.commithash()),
            // 'BRANCH': JSON.stringify(gitRevisionPlugin.branch()),
            // "MAJOR": (gitRevisionPlugin.version().split("-")[0].split(".")[0].toString().substr(1)),
            // "MINOR": (gitRevisionPlugin.version()).split("-")[0].split(".")[1],
            // "PATCH": (gitRevisionPlugin.version()).split("-")[0].split(".")[2]


            'FULLVERSION': JSON.stringify(gitInfo.semverString),
            'COMMITHASH': JSON.stringify(gitRevisionPlugin.commithash()),
            'BRANCH': JSON.stringify(gitRevisionPlugin.branch()),
            'VERSION': JSON.stringify(gitInfo.semver.version),

            "MAJOR": JSON.stringify(gitInfo.semver.major),
            "MINOR": JSON.stringify(gitInfo.semver.minor),
            "PATCH": JSON.stringify(gitInfo.semver.patch)
        })
    ]
}

const serverConfig = {
    entry: './server/main.js',
    target: 'node',
    externals: [meteorExternals()],
    devServer: {
        hot: true,
        open: true
    },
    devtool: 'source-map',
    mode: "development",
    module: {
        rules: [{
            test: /\.js$/,
            loader: 'babel-loader',
            exclude: /node_modules/
        }]
    }
};

module.exports = [clientConfig, serverConfig];