/**
 * @file
 *
 * Follow these issues:
 * - [attrs option for MiniCssExtractPlugin](https://git.io/JU10P)
 */
module.exports = () => {
  const MiniCssExtractPlugin = require("mini-css-extract-plugin");
  // FIXME: const IconfontWebpackPlugin = require("iconfont-webpack-plugin");
  const {
    getSassAdditionalData,
    getSassIncludePaths,
    getSassSharedResources,
  } = require("../utils/sass");
  const { isProduction, isTurbo } = require("../config");

  const minicssLoader = () => ({
    loader: MiniCssExtractPlugin.loader,
    options: {
      // style-loader might be avoided and we might use just Mini... but
      // there is an issue with hmr, @see https://git.io/JU1RW
      // hmr: !isProduction,
      // reloadAll: !isProduction,
      // @see https://github.com/webpack-contrib/mini-css-extract-plugin#esmodule
      // @see https://github.com/webpack/webpack/issues/6741
      esModule: isProduction ? true : false,
    },
  });

  const styleLoader = () => ({
    // FIXME: using tweaked custom style-loader, see https://git.io/JU1qO
    loader: require.resolve("./style-loader"),
    options: {
      esModule: isProduction ? true : false,
      // FIXME: see https://git.io/JU1qO
      // attributes: { id: '[path][name].[ext]'}
    },
  });

  const cssLoader = () => ({
    loader: require.resolve("css-loader"),
    options: {
      esModule: isProduction ? true : false,
      sourceMap: isTurbo ? false : true,
      importLoaders: 1, // @see https://git.io/fjEmR
    },
  });

  const postcssLoader = () => ({
    loader: require.resolve("postcss-loader"),
    options: {
      // sourceMap: isTurbo ? false : isProduction ? true : "inline",
      postcssOptions: (loader) => ({
        plugins: [
          // FIXME: broken IconfontWebpackPlugin..with new postcss?
          // new IconfontWebpackPlugin({
          //   resolve: loader.resolve,
          // }),
          require("autoprefixer")(),
        ],
      }),
    },
  });

  const sassLoader = () => ({
    loader: require.resolve("sass-loader"),
    options: {
      sourceMap: isTurbo ? false : true,
      additionalData: getSassAdditionalData(),
      sassOptions: {
        includePaths: getSassIncludePaths(),
      },
    },
  });

  const sassResourcesLoader = () => ({
    loader: require.resolve("sass-resources-loader"),
    options: {
      resources: getSassSharedResources(),
    },
  });

  // return [{
  //   test: function(filename, entry) {
  //     if (/\.(css|sass|scss)$/.test(filename)) {
  //       if(/src\/(routes|layouts)\//.test(filename)){
  //         return true;
  //       }
  //       return false;
  //     }
  //   },
  //   use: [
  //     minicssLoader(),
  //     cssLoader(),
  //     postcssLoader(),
  //     sassLoader(),
  //     sassResourcesLoader()
  //   ],
  // }, {
  //   // sideEffects: true,
  //   test: function(filename) {
  //     // console.log("filename", filename);
  //     if (/\.(css|sass|scss)$/.test(filename)) {
  //       // if (filename.indexOf("barba") > -1) console.log(filename);

  //       if(/src\/(routes|layouts)\//.test(filename)){
  //         return false;
  //       }
  //       return true;
  //     }
  //   },
  //   use: [
  //     styleLoader(),
  //     cssLoader(),
  //     postcssLoader(),
  //     sassLoader(),
  //     sassResourcesLoader(),
  //   ],
  // }];

  return [
    {
      // sideEffects: true,
      test: /\.(css|sass|scss)$/,
      use: [
        isProduction ? minicssLoader() : styleLoader(),
        cssLoader(),
        postcssLoader(),
        sassLoader(),
        sassResourcesLoader(),
      ],
    },
  ];
};
