// @ts-check

const path = require("path");
const MiniCSSExtractPlugin = require("mini-css-extract-plugin");
const { merge } = require("webpack-merge");
const yaml = require("yaml");
const { BundleAnalyzerPlugin } = require("webpack-bundle-analyzer");

const baseConfig = require("./webpack.config");
const { kemonoSite } = require("./configs/vars");
/**
 * @type import("webpack").Configuration
 */
const webpackConfigProd = {
  mode: "production",
  devtool: "source-map",
  plugins: [
    new BundleAnalyzerPlugin({ analyzerMode: "static", openAnalyzer: false }),
    new MiniCSSExtractPlugin({
      filename: "static/bundle/css/[name]-[contenthash].css",
      chunkFilename: "static/bundle/css/[id]-[contenthash].chunk.css",
    }),
  ],
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: [
          {
            loader: "babel-loader",
            options: {
              presets: [
                ["@babel/preset-env", { targets: "defaults" }],
                ["@babel/preset-typescript"],
                ["@babel/preset-react"],
              ],
              plugins: ["@babel/plugin-transform-runtime"],
            },
          },
          "ts-loader",
        ],
        exclude: /node_modules/,
      },
      {
        test: /\.s[ac]ss$/i,
        use: [
          MiniCSSExtractPlugin.loader,
          {
            loader: "css-loader",
            // options: {
            //   sourceMap: true,
            // }
          },

          {
            loader: "postcss-loader",
            options: {
              postcssOptions: {
                plugins: [["postcss-preset-env"]],
              },
            },
          },
          {
            loader: "sass-loader",
            options: {
              // sourceMap: true,
              additionalData: `$kemono-site: '${kemonoSite}';`,
            },
          },
        ],
      },

      {
        test: /\.(png|jpg|jpeg|gif|webp)$/i,
        type: "asset/resource",
        generator: {
          filename: "static/bundle/assets/[name]-[contenthash][ext][query]",
        },
      },
      {
        test: /\.(woff|woff2|eot|ttf|otf)$/i,
        type: "asset/resource",
        generator: {
          filename: "static/bundle/fonts/[name]-[contenthash][ext][query]",
        },
      },
      {
        test: /\.svg$/i,
        type: "asset/resource",
        generator: {
          filename: "static/bundle/svg/[name]-[contenthash][ext][query]",
        },
      },
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"],
      },
      {
        test: /\.yaml$/i,
        type: "json",
        parser: {
          parse: yaml.parse,
        },
      },
    ],
  },
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "static/bundle/js/[name]-[contenthash].bundle.js",
    assetModuleFilename:
      "static/bundle/assets/[name]-[contenthash][ext][query]",
    publicPath: "/",
    clean: true,
  },
  optimization: {
    moduleIds: "deterministic",
    runtimeChunk: "single",
  },
};

module.exports = merge(baseConfig, webpackConfigProd);