var webpack = require("webpack");
var path = require("path");
var WebpackPwaManifest = require("webpack-pwa-manifest");
var HtmlWebpackPlugin = require("html-webpack-plugin");
var { CleanWebpackPlugin } = require("clean-webpack-plugin");

var mode = "development";
var BUILD_DIR = path.resolve(__dirname, "../build/public/");

if (process.env.NODE_ENV === "production") {
  mode = "production";
  BUILD_DIR = path.resolve(__dirname, "../canapeapp/public/");
}

var SRC_DIR = path.resolve(__dirname);

const config = {
  mode: mode,
  entry: path.join(SRC_DIR, "js/app.js"),
  output: {
    path: BUILD_DIR,
    filename: "[contenthash]-app.js",
    assetModuleFilename: "[hash]-[name][ext][query]",
  },
  optimization: {},
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
          options: {
            presets: ["@babel/preset-env", "@babel/preset-react"],
          },
        },
      },
      {
        test: /\.scss$/,
        use: ["style-loader", "css-loader", "sass-loader", "postcss-loader"],
      },
      {
        test: /\.(png|jpg|svg|ico)$/,
        type: "asset/resource",
      },
      {
        test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
        type: "asset",
      },
      {
        test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
        type: "asset",
      },
    ],
  },
  plugins: [
    new webpack.DefinePlugin({
      "process.env.NODE_ENV": JSON.stringify(process.env.NODE_ENV),
    }),
    new CleanWebpackPlugin({
      cleanOnceBeforeBuildPatterns: ["**/*", "!img/**/*", "!img"],
    }),
    new HtmlWebpackPlugin({
      template: path.join(SRC_DIR, "index.html"),
    }),
    new WebpackPwaManifest({
      fingerprints: true,
      inject: true,
      ios: {
        "apple-mobile-web-app-status-bar-style": "default",
        "apple-mobile-web-app-title": "Canapé",
      },
      name: "Canapé",
      short_name: "Canapé", // eslint-disable-line camelcase
      background_color: "#4e5d6c", // eslint-disable-line camelcase
      theme_color: "#4e5d6c", // eslint-disable-line camelcase
      display: "standalone",
      orientation: "omit",
      publicPath: "/",
      scope: "/",
      start_url: "/", // eslint-disable-line camelcase
      icons: [
        {
          src: path.resolve(__dirname, "img/android-chrome-512x512.png"),
          sizes: [96, 128, 192, 256, 384, 512],
        },
        {
          src: path.resolve(__dirname, "img/apple-touch-icon.png"),
          sizes: [80, 120, 152, 167, 180],
          ios: true,
        },
      ],
    }),
  ],
  resolve: {
    extensions: [".js"],
  },
  devtool: mode === "production" ? false : "source-map",
};

module.exports = config;