const path = require('path');
const dotenv = require('dotenv');
const fs = require('fs');
const webpack = require('webpack');
const getApiURL = require('./webpack/conf/api.conf');

const ExtractTextPlugin = require('extract-text-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const HtmlWebpackHarddiskPlugin = require('html-webpack-harddisk-plugin');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');

const extractLess = new ExtractTextPlugin({
  filename: '[name].[contenthash].css',
  disable: process.env.NODE_ENV === 'development'
});
// const indexHTMLFile = new HtmlWebpackPlugin({
//   template: 'index.pug',
//   filename: '../index.html'
// });

const isProd = process.env.NODE_ENV === 'production';
const isDev = !isProd;
const isLocal = process.env.LOCAL ? process.env.LOCAL === 'true' : true;
const sourceRoot = './src';
const publicPath = '/assets/';

//* ENVIROMENT SETTINGS
const dotEnvPath = path.resolve(__dirname, '.env');
if (!fs.existsSync(dotEnvPath)) {
  fs.writeFileSync(dotEnvPath, '');
}
const dotEnvConfig = dotenv.load();
const ENV = dotEnvConfig.parsed;

if (!ENV.REDUX_STATE_VERSION) ENV.REDUX_STATE_VERSION = 0;
fs.writeFileSync(dotEnvPath, ''); // clear file

Object.keys(ENV).forEach((key) => {
  let value;
  if (key === 'REDUX_STATE_VERSION') {
    value = Number(ENV[key], 10) + 1;
  } else {
    value = ENV[key];
  }
  fs.appendFileSync(dotEnvPath, `${key}=${value}\n`);
});

const setEnvironment = new webpack.DefinePlugin({
  'process.env.API_URL': getApiURL(isDev, isLocal),
  'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
  'process.env.REDUX_STATE_VERSION': ENV.REDUX_STATE_VERSION
});
//* ENVIROMENT SETTINGS

module.exports = {
  context: path.resolve(__dirname, sourceRoot),
  entry: {
    index: './index.ejs',
    vendor: [
      'babel-polyfill',
      'react',
      'react-dom',
      'react-redux',
      'react-router',
      'redux',
      'redux-thunk',
      'chart.js',
      'redux-form',
      'react-datepicker',
      'react-bootstrap'
    ]
  },
  watchOptions: {
    ignored: /node_modules/
  },
  resolve: {
    extensions: ['.js', '.less'],
    modules: [path.resolve(__dirname, `${sourceRoot}/js`), 'node_modules'],
    alias: {
      img: path.resolve(__dirname, `${sourceRoot}/img`),
      styles: path.resolve(__dirname, `${sourceRoot}/styles/share`)
    }
  },
  devtool: isDev ? 'source-map' : '',
  output: {
    path: path.resolve(__dirname, './dist/assets'),
    filename: 'index.[hash].js',
    publicPath
  },
  devServer: {
    contentBase: path.resolve(__dirname, sourceRoot)
  },
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        loader: 'babel',

        query: {
          presets: ['es2015', 'react', 'stage-2']
        }
      },
      { test: /\.ejs$/, loader: 'ejs-loader' },
      {
        test: /\.js$/,
        exclude: [/node_modules/],
        use: [
          {
            loader: 'babel-loader',
            options: {
              plugins: [
                'transform-decorators-legacy',
                'transform-class-properties'
              ],
              presets: ['latest', 'stage-0', 'react', 'es2015']
            }
          }
        ]
      },
      {
        test: /\.less$/,
        include: [path.resolve(__dirname, sourceRoot, 'js')],
        use: [
          {
            loader: 'style-loader', // creates style nodes from JS strings
            options: {
              sourceMap: true
            }
          },
          {
            loader: 'css-loader', // translates CSS into CommonJS
            options: {
              modules: true,
              localIdentName: '[local]___[hash:base64:5]'
            }
          },
          {
            loader: 'less-loader' // compiles Less
          }
        ]
      },
      {
        test: /\.less$/,
        exclude: [path.resolve(__dirname, sourceRoot, 'js')],
        use: [
          { loader: 'style-loader' ,options: {
            insertAt:'top'
          }},
          { loader: 'css-loader' },
          { loader: 'less-loader' }
        ]
      },
      {
        test: /.(ttf|otf|eot|woff(2)?)(\?[a-z0-9]+)?$/,
        loader: 'file-loader?name=fonts/[name].[ext]'
      },
      {
        test: /\.(jpe?g|png|gif|svg)$/i,
        use: [
          {
            loader: 'file-loader',
            query: {
              name: 'images/[name]-[hash].[ext]',
              publicPath
            }
          },
          {
            loader: 'image-webpack-loader',
            query: {
              mozjpeg: {
                progressive: true
              },
              gifsicle: {
                interlaced: false
              },
              optipng: {
                optimizationLevel: 4
              },
              pngquant: {
                quality: '75-90',
                speed: 3
              }
            }
          }
        ]
      },
      {
        test: /\.pug$/,
        loader: 'pug-loader'
      }
    ]
  },
  plugins: [
    extractLess,
    setEnvironment,
    new HtmlWebpackPlugin({
      template: 'index.ejs',
      inject: true,
    }),
    new HtmlWebpackHarddiskPlugin({
      outputPath: path.resolve(__dirname, sourceRoot)
    }),
    new webpack.optimize.CommonsChunkPlugin({
      name: 'vendor',
      filename: 'vendor.[chunkhash].js',
      minChunks: Infinity
    }),
    new webpack.optimize.CommonsChunkPlugin({ name: 'meta', chunks: ['vendor'], filename: 'meta.[hash].js' }),
    new webpack.NamedModulesPlugin(),
    new HtmlWebpackPlugin(),
    new webpack.optimize.ModuleConcatenationPlugin(),
    // new webpack.optimize.CommonsChunkPlugin({
    //   name: 'vendor',
    //   filename: 'vendor.[hash].js',
    //   minChunks(module) {
    //     return module.context &&
    //            module.context.indexOf('node_modules') >= 0;
    //   }
    // }),
    new webpack.DefinePlugin({
      'process.env': {
          'NODE_ENV': JSON.stringify('production')
      }
  }),
    new UglifyJsPlugin()

  //   new webpack.HashedModuleIdsPlugin()
  ]
};