import path    from 'path'
import webpack from 'webpack'
import process from 'process'

// import WebPackHotClient from 'webpack-hot-client'
// const path = require('path');
// const HtmlWebpackPlugin = require('html-webpack-plugin');
// const CleanWebpackPlugin = require('clean-webpack-plugin');
// const webpack = require('webpack');

// const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

import WriteFilePlugin from 'write-file-webpack-plugin';

const ENV = (process.env && process.env.NODE_ENV && process.env.NODE_ENV.trim() === 'production') ? 'production' : 'development';

let config = {

    // I would recommend using different config variables
    // depending on the eviroment.
    // The package 'webpack-merge' can help with that.
    // This tenary setup is just for simplicity sake.

    // context: path.resolve(__dirname, '../../wp-content/themes/biuro'),
    context: path.resolve(__dirname, '../'),

    entry: (ENV === 'production') ? {
        main: [
            './js/main',
            // '../../../assets/js/components/figure',
        ],
    } : {
        main: [
            './js/main',
            // 'webpack/hot/dev-server',
            // 'webpack-hot-middleware/client',
        ],
    },

    mode: ENV,

    // resolve: {
    //     modules: [
    //         path.resolve(__dirname, '../../node_modules/'),
    //         path.resolve(__dirname, '../js/'),
    //         // path.resolve('./node_modules'),
    //         // path.resolve('./js')
    //     ],
    //     alias: {
    //         // swiper: path.resolve(__dirname, '../js/components/swiper')
    //     }
    // },

    module: {
        rules: [{
            test: /\.js?$/,
            exclude: /node_modules/,
            use: {
                loader: 'babel-loader',
                options: {
                    presets: ['@babel/preset-env']
                }
            }
        }]
    },

    // optimization: {
    //     minimizer: [
    //         new webpack.optimize.UglifyJsPlugin({
    //             cache: true,
    //             parallel: true,
    //             uglifyOptions: {    // https://github.com/webpack-contrib/uglifyjs-webpack-plugin/tree/master#uglifyoptions
    //                 // compress: false,
    //                 // ecma: 5,
    //                 mangle: false,
    //                 keep_classnames: true
    //             },
    //             // sourceMap: true
    //         })
    //     ]
    // },

    output: {
        filename: 'wp-content/themes/biuro/js/[name].js',
        // filename: './js/[name]-[hash].js',
        chunkFilename: 'wp-content/themes/biuro/js/components/[name].js',
        path: path.resolve(__dirname, '../../'),
        publicPath: '/'
    },



    plugins: (ENV === 'production') ? [
        new webpack.DefinePlugin({
            'process.env.NODE_ENV': JSON.stringify(ENV)
        }),
    ] : [
        new webpack.DefinePlugin({
            'process.env.NODE_ENV': JSON.stringify(ENV)
        }),
        new WriteFilePlugin({
            test: /\.js?$/
        }),
        // new BundleAnalyzerPlugin(),
        new webpack.HotModuleReplacementPlugin()
    ],

    // plugins: isProduction ? [
    //     new webpack.DefinePlugin({
    //         'process.env.NODE_ENV': '"production"'
    //     }),
    //     new webpack.optimize.UglifyJsPlugin()
    // ] : [
    //     new webpack.HotModuleReplacementPlugin()
    // ]
}


function scripts() {

    return new Promise(resolve => webpack(config, (err, stats) => {

        if (err) {
            console.log('Webpack', err)
        }

        console.log(stats.toString({ /* stats options */ }))

        resolve()
    }))
}

module.exports = { config, scripts }

