/* eslint-disable import/no-extraneous-dependencies */

const path = require("path");
const { EnvironmentPlugin } = require("webpack");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const { BundleAnalyzerPlugin } = require("webpack-bundle-analyzer");
const ProgressPlugin = require("progress-webpack-plugin");
const dotenv = require("dotenv");

const rootPath = path.resolve(__dirname, "..");
const isDev = process.env.NODE_ENV === "development";

module.exports = {
  resolve: {
    extensions: [".js", ".jsx"],
    mainFields: ["main", "module", "browser"],
  },
  entry: { renderer: path.resolve(rootPath, "src/renderer", "index.jsx") },
  target: "electron-renderer",
  mode: isDev ? "development" : "production",
  devtool: isDev ? "eval-source-map" : false,
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
          options: {
            presets: [
              [
                "@babel/preset-react",
                {
                  modules: "esnext",
                  targets: {
                    electron: "20.3.0",
                  },
                  browserslist: ["Electron"],
                },
              ],
            ],
          },
        },
      },
      {
        test: /\.(png|svg|jpg|jpeg|gif)$/i,
        type: "asset/resource",
      },
      {
        test: /\.(woff|woff2|eot|ttf)$/i,
        use: [
          {
            loader: "file-loader",
          },
        ],
      },
      {
        test: /\.less$/i,
        use: [
          { loader: "style-loader" },
          { loader: "css-loader" },
          {
            loader: "less-loader",
            options: {
              lessOptions: {
                javascriptEnabled: true,
              },
            },
          },
        ],
      },
    ],
  },
  devServer: {
    static: path.join(rootPath, "dist/renderer"),
    devMiddleware: {
      publicPath: "/",
      writeToDisk: true,
    },
    port: 4000,
    historyApiFallback: true,
    compress: true,
    hot: true,
  },
  output: {
    path: path.resolve(rootPath, "dist/renderer"),
    filename: "js/[name].js",
    publicPath: "./",
    clean: false, // used clean only once in [electron.webpack.js]
  },
  plugins: [
    new ProgressPlugin({ identifier: "renderer-react" }),
    new BundleAnalyzerPlugin({
      reportFilename: "../renderer_analyze.html",
      openAnalyzer: false,
      analyzerMode: isDev ? "static" : "disabled",
    }),
    new HtmlWebpackPlugin({
      title: "Taskbar",
    }),
    new EnvironmentPlugin({
      NODE_ENV: isDev ? "development" : "production",
      ...dotenv.config({
        path: isDev ? ".env.development" : ".env.production",
      }).parsed,
    }),
  ],
};