const PurifyCSSPlugin = require('purifycss-webpack');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const ImageMinWebpWebpackPlugin = require('imagemin-webp-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const TerserPlugin = require('terser-webpack-plugin');
const publicPath = '/';
const htmlTemplatesPath = 'html';
const pages = require('./webpack.pages').map((page) => page.path);
const homePage = `/${htmlTemplatesPath}/main.html`;

const apiFallbackOptions = (pagesTitles) => {
  return pagesTitles.map((title) => ({
    from: new RegExp(`^/${title}$`),
    to: `/${htmlTemplatesPath}/${title}.html`
  }));
  // return options;
};

exports.publicPath = publicPath;

exports.devServer = ({ host, port } = {}) => ({
  devServer: {
    disableHostCheck: true,
    contentBase: './src',
    watchOptions: {
      ignored: /node_modules/
    },
    publicPath,
    historyApiFallback: {
      rewrites: [{
        from: /^\/$/,
        to: `/${homePage}`
      }, ...apiFallbackOptions(pages)]
    },
    host, // Defaults to `localhost`
    port, // Defaults to 8080
    overlay: {
      errors: true,
      warnings: false
    }
  }
});

exports.loadPug = (options) => ({
  module: {
    rules: [
      {
        test: /\.pug$/,
        use: [
          {
            loader: 'html-loader',
            options: {
              interpolate: true,
              attrs: ['srcset']
            }
          },
          {
            loader: 'pug-html-loader',
            options
          }
        ]
      }
    ]
  }
});

exports.lintJS = ({ include, exclude, options }) => ({
  module: {
    rules: [
      {
        test: /\.js$/,
        include,
        exclude,
        enforce: 'pre',
        loader: 'eslint-loader',
        options
      }
    ]
  }
});

const sharedCSSLoaders = [
  {
    loader: 'css-loader',
    options: {
      localIdentName: '[hash:base64:5]',
      importLoaders: 1
    }
  }
];

exports.autoprefix = () => ({
  loader: 'postcss-loader',
  options: {
    plugins: () => [require('autoprefixer')]
  }
});

exports.purifyCSS = (options) => ({
  plugins: [
    new PurifyCSSPlugin(options)
  ]
});

exports.minifyCSS = ({ options }) => ({
  optimization: {
    minimizer: [
      new OptimizeCSSAssetsPlugin({
        cssProcessorOptions: options,
        canPrint: true // false for analyzer
      })
    ]
  }
});

exports.loadCSS = ({ include, exclude, use } = {}) => ({
  module: {
    rules: [
      {
        test: /\.(scss|css)$/,

        include,
        exclude,

        use: [
          {
            loader: 'style-loader'
          },
          ...sharedCSSLoaders.concat(use)
        ]
      }
    ]
  }
});

exports.extractCSS = ({ include, exclude, options, use = [] } = {}) => ({
  module: {
    rules: [
      {
        test: /\.(scss|css)$/,

        include,
        exclude,

        use: [
          { loader: MiniCssExtractPlugin.loader, options: { publicPath: '../' } },
          ...sharedCSSLoaders, ...use]
      }
    ]
  },
  plugins: [
    new MiniCssExtractPlugin(options)
  ]
});

exports.svgSprite = ({ include, exclude, options } = {}) => ({
  module: {
    rules: [
      {
        // test: /^icon.*\.svg$/,
        test: /.*icon.*\.svg$/,
        include,
        exclude,
        use: [
          {
            loader: 'svg-sprite-loader',
            options
          },
          'svg-transform-loader'
        ]
      }
    ]
  }
});

exports.loadImages = ({ include, exclude, options } = {}) => ({
  module: {
    rules: [
      {
        test: /^(?!icon).*\.(png|jpg|svg|webp)$/,
        //
        include,
        exclude,
        // use: {
        // loader: 'url-loader',
        //       options
        //     }
        //   }
        use: {
          loader: 'file-loader',
          options
        }
      }]
  }
});

exports.optimizeImages = ({ include, exclude } = {}) => ({
  module: {
    rules: [
      {
        test: /\.(gif|png|jpe|webp?g)$/i,
        include,
        exclude,
        use: {
          loader: 'image-webpack-loader',
          options: {
            // progressive: true,
            // optimizationLevel: 7,
            gifsicle: {
              interlaced: false,
              optimizationLevel: 7
            },
            mozjpeg: {
              progressive: true,
              quality: 65
            },
            // svgo: {
            // },

            pngquant: {
              quality: '65-90',
              speed: 4
            }
          }
        }
      }
    ]
  }
});

exports.loadFonts = ({ include, exclude, options } = {}) => ({
  module: {
    rules: [
      {
        // Capture eot, ttf, woff, and woff2
        test: /\.(eot|ttf|otf|woff|woff2)(\?v=\d+\.\d+\.\d+)?$/,

        include,
        exclude,

        use: {
          loader: 'file-loader',
          options
        }
      }
    ]
  }
});

exports.loadJS = ({ include, exclude, options } = {}) => ({
  module: {
    rules: [
      {
        test: /\.js$/,

        include,
        exclude,

        loader: 'babel-loader',
        options
      }
    ]
  }
});

exports.minifyJS = options => ({
  optimization: {
    minimizer: [
      new TerserPlugin(options)
    ]
  }
});

exports.page = ({
  path = '',
  template = require.resolve(
    'html-webpack-plugin/default_index.ejs'
  ),
  title
  // entry,
  // chunks
} = {}) => ({
  // entry,
  plugins: [
    new HtmlWebpackPlugin({
      // filename: `${path && path + '/'}index.html`,
      filename: `${htmlTemplatesPath}/${path && path}.html`,
      template,
      title
      // chunks
    }),
    new ImageMinWebpWebpackPlugin({
      config: [{
        test: /\.(jpe?g|png)/,
        options: {
          quality: 75
        }
      }],
      overrideExtension: true,
      detailedLogs: true,
      silent: false,
      strict: true
    })
  ]
});