const autoprefixer = require('autoprefixer');
const path = require('path');
const webpack = require('webpack');
const merge = require('webpack-merge');
const glob = require('glob-all');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ImageminWebpackPlugin = require('imagemin-webpack-plugin').default;
const ScriptExtHtmlWebpackPlugin = require('script-ext-html-webpack-plugin');
const PurifyCSSWebpackPlugin = require('purifycss-webpack');

// Determines whether this build is going to be a development build.
// const isDev = process.env.NODE_ENV === 'development';
const isDev = process.env.NODE_ENV !== 'production';

const isDevServer = path.basename(require.main.filename) === 'webpack-dev-server.js';

// Maximum inlining file size in Bytes
const maxInlineFileSize = 0;

// Standard assets output path
const assetHash = 'hash';
const assetOutputDir = `assets/[${assetHash}:2]`;
const assetOutputFilename = `[name]-[${assetHash}].[ext]`;
const assetOutputPath = `${assetOutputDir}/${assetOutputFilename}`;

// would have been nice if output.file supported this as well, only loaders seem to do so though
// const assetHash = 'sha512:hash:base64';

/*
 * Base Webpack configuration
 */
const baseWebpackConfig = {
  entry: [
    'babel-polyfill',
    './src',
  ],
  module: {
    rules: [
      {
        test: /\.js$/i,
        exclude: /node_modules/,
        loader: 'babel-loader',
      },
      {
        test: /\.s[ac]ss$/i,
        use: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: [
            {
              loader: 'css-loader',
              options: { importLoaders: 1, minimize: !isDev },
            },
            {
              loader: 'postcss-loader',
              options: {
                sourceMap: true,
                plugins: [autoprefixer({ browsers: ['last 3 versions', '> 1%'] })],
              },
            },
            {
              loader: 'resolve-url-loader',
              options: {
                sourceMap: true,
                fail: true,
                silent: false,
              },
            },
            {
              loader: 'sass-loader',
              options: { sourceMap: true },
            },
          ],
        }),
      },
      {
        test: /\.css(?:\?.*)?$/i,
        use: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: [
            {
              loader: 'css-loader',
              options: { importLoaders: true, minimize: !isDev },
            },
            {
              loader: 'postcss-loader',
              options: {
                sourceMap: true,
                plugins: [autoprefixer({ browsers: ['last 3 versions', '> 1%'] })],
              },
            },
          ],
        }),
      },
      {
        test: /\.json(?:\?.*)?$/,
        loader: 'json-loader',
      },
      {
        test: /\.(jpe?g|png|gif|tiff?|svg|ico)(?:\?.*)?$/i,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: assetOutputPath,
            },
          },
        ],
      },
      {
        test: /\.woff(?:\?.*)?$/,
        use: {
          loader: 'file-loader',
          options: {
            name: assetOutputPath,
          },
        },
      },
      {
        test: /\.woff2(?:\?.*)?$/,
        use: {
          loader: 'file-loader',
          options: {
            name: assetOutputPath,
          },
        },
      },
      {
        test: /\.ttf(?:\?.*)?$/,
        use: {
          loader: 'file-loader',
          options: {
            name: assetOutputPath,
          },
        },
      },
      {
        test: /\.otf(?:\?.*)?$/,
        use: {
          loader: 'file-loader',
          options: {
            name: assetOutputPath,
          },
        },
      },
      {
        test: /\.eot(?:\?.*)?$/,
        use: {
          loader: 'file-loader',
          options: {
            name: assetOutputPath,
          },
        },
      },
      {
        test: /\.html$/,
        use: {
          loader: 'html-loader',
          options: {
            interpolate: true,
            minimize: !isDev,
          },
        },
      },
      {
        test: require.resolve('masonry-layout'),
        loader: 'imports-loader?this=>window',
      },
    ],
  },
  plugins: [
    new webpack.NamedModulesPlugin(),

    new webpack.ProvidePlugin({
      $: 'jquery',
      jQuery: 'jquery',
      'window.$': 'jquery',
      'window.jQuery': 'jquery',
    }),

    new webpack.optimize.OccurrenceOrderPlugin(),

    new webpack.optimize.CommonsChunkPlugin({
      name: 'vendor',
      minChunks({ resource }) {
        return resource && !(
          resource.indexOf('.css') >= 0 ||
          resource.indexOf('.less') >= 0 ||
          resource.indexOf('.scss') >= 0 ||
          resource.indexOf('.sass') >= 0
        ) && (
          resource.indexOf('bower_components') >= 0 ||
          resource.indexOf('node_modules') >= 0 ||
          resource.indexOf('vendor') >= 0
        );
      },
    }),

    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'development'),
      __DEV__: JSON.stringify(isDev),
    }),

    // Extract CSS stylesheets to files
    new ExtractTextPlugin(`[name]-[${assetHash.replace(/hash/ig, 'contenthash')}].css`),

    // Generate boilerplate HTML along side actual JS bundle
    new HtmlWebpackPlugin({
      template: 'src/index.html',
      filename: 'index.html',
    }),
    new HtmlWebpackPlugin({
      template: 'src/imprint.html',
      filename: 'imprint.html',
    }),
    new HtmlWebpackPlugin({
      template: 'src/unternehmen.html',
      filename: 'unternehmen.html',
    }),
    new HtmlWebpackPlugin({
      template: 'src/arztpraxen.html',
      filename: 'arztpraxen.html',
    }),
    new HtmlWebpackPlugin({
      template: 'src/ueber.html',
      filename: 'ueber.html',
    }),
    new HtmlWebpackPlugin({
      template: 'src/webshops.html',
      filename: 'webshops.html',
    }),
    //Referenzen
    new HtmlWebpackPlugin({
      template: 'src/gartenMoser.html',
      filename: 'gartenMoser.html',
    }),
    new HtmlWebpackPlugin({
      template: 'src/ICPDeutschland.html',
      filename: 'ICPDeutschland.html',
    }),
    new HtmlWebpackPlugin({
      template: 'src/Spectra.html',
      filename: 'Spectra.html',
    }),
    new HtmlWebpackPlugin({
      template: 'src/Vinico.html',
      filename: 'Vinico.html',
    }),
    new HtmlWebpackPlugin({
      template: 'src/Sprintis.html',
      filename: 'Sprintis.html',
    }),
    new HtmlWebpackPlugin({
      template: 'src/Satema.html',
      filename: 'Satema.html',
    }),
    new HtmlWebpackPlugin({
      template: 'src/Soccerboots.html',
      filename: 'Soccerboots.html',
    }),
    new HtmlWebpackPlugin({
      template: 'src/Seipp.html',
      filename: 'Seipp.html',
    }),
    new HtmlWebpackPlugin({
      template: 'src/RGS.html',
      filename: 'RGS.html',
    }),
    new HtmlWebpackPlugin({
      template: 'src/Moormann.html',
      filename: 'Moormann.html',
    }),
    new HtmlWebpackPlugin({
      template: 'src/Bergfreunde.html',
      filename: 'Bergfreunde.html',
    }),
    new HtmlWebpackPlugin({
      template: 'src/Kinderwunschpraxis.html',
      filename: 'Kinderwunschpraxis.html',
    }),
    new ScriptExtHtmlWebpackPlugin({
      defaultAttribute: 'defer',
    }),
    new HtmlWebpackPlugin({
      template: 'src/Arztsoftware.html',
      filename: 'Arztsoftware.html',
    }),

    //category
    new HtmlWebpackPlugin({
      template: 'src/ecommerce.html',
      filename: 'ecommerce.html',
    }),
    new HtmlWebpackPlugin({
      template: 'src/solfusion.html',
      filename: 'solfusion.html',
    }),
    new HtmlWebpackPlugin({
      template: 'src/WebsitesUndCms.html',
      filename: 'WebsitesUndCms.html',
    }),
    new HtmlWebpackPlugin({
      template: 'src/SoftwareEntwicklung.html',
      filename: 'SoftwareEntwicklung.html',
    }),
    new HtmlWebpackPlugin({
      template: 'src/Netzwerk.html',
      filename: 'Netzwerk.html',
    }),
    new HtmlWebpackPlugin({
      template: 'src/Warenwirtschaft.html',
      filename: 'Warenwirtschaft.html',
    }),
    new HtmlWebpackPlugin({
      template: 'src/Virtualisierung.html',
      filename: 'Virtualisierung.html',
    }),

    // Image optimization (only on production)
    new ImageminWebpackPlugin({
      disable: isDev,
      gifsicle: {
        interlaced: true,
      },
      mozjpeg: {
        quality: 85,
        progressive: true,
      },
      optipng: {
        optimizationLevel: 7,
      },
      svgo: {
        plugins: [
          {
            removeViewBox: false,
          },
          {
            removeEmptyAttrs: false,
          },
        ],
      },
    }),
  ],
  resolve: {
    alias: {
      jquery: 'jquery/src/jquery',
      'smooth-scroll': 'smooth-scroll/src/js/smooth-scroll.js',
    },
    enforceExtension: false,
    extensions: [
      '.js',
      '.sass',
      '.scss',
      '.css',
    ],
  },
  resolveLoader: {
    modules: [
      'vendor', // Composer
      'node_modules', // NPM/Yarn
      'bower_components', // Bower
    ],
  },
  output: {
    filename: assetOutputPath.replace(/\[ext\]/, 'js'),
    chunkFilename: assetOutputPath.replace(/hash/ig, 'chunkhash').replace(/\[ext\]/, 'js'),
    path: path.resolve(__dirname, 'dist'),
    sourceMapFilename: '[file].map',
  },
  performance: {
    assetFilter: filename => filename.endsWith('.js') || filename.endsWith('.css'),
  },
  devServer: {
    lazy: false,
    hot: true,
    historyApiFallback: true,
    host: '0.0.0.0',
    contentBase: [
      'src',
    ],
    watchContentBase: true,
  },
};

// Debug webpack config
const developmentWebpackConfig = {
  devtool: '#inline-source-map',
  performance: {
    hints: false,
  },
};

// Production webpack config
const productionWebpackConfig = {
  plugins: [
    new PurifyCSSWebpackPlugin({
      styleExtensions: [
        '.css',
        '.less',
        '.sass',
        '.scss',
      ],
      moduleExtensions: [
        '.html',
        '.js',
        '.jsx',
      ],
      paths: glob.sync([
        path.join(__dirname, 'src', '**.js'),
        path.join(__dirname, 'src', '**.jsx'),
        path.join(__dirname, 'src', '**.html'),
        path.join(__dirname, 'src', '**.css'),
        path.join(__dirname, 'src', '**.sass'),
        path.join(__dirname, 'src', '**.scss'),
        path.join(__dirname, 'src', '**.less'),
      ]),
    }),
    new webpack.optimize.UglifyJsPlugin({
      compress: {
        warnings: false,
      },
    }),
  ],
  performance: {
    hints: 'warning',
  },
};

module.exports = merge(baseWebpackConfig, isDev
    ? developmentWebpackConfig
    : productionWebpackConfig);

process.traceDeprecation = true;