const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

const isProduction = process.env.NODE_ENV === 'production';

module.exports = {
  mode: isProduction ? 'production' : 'development',
  entry: {
    'calendar-event-editor': './webpack/calendar-event-editor.js',
    'two-factor-enrollment': './webpack/two-factor-enrollment.js',
    churchcrm: './webpack/skin-main',
    'churchcrm-rtl': './webpack/skin-rtl',
    'photo-uploader': './webpack/photo-uploader-entry',
    'root-dashboard': './webpack/root-dashboard',
    setup: './webpack/setup',
    'family-register': './webpack/family-register',
    'family-verify': './webpack/family-verify',
    'upgrade-wizard': './webpack/upgrade-wizard',
    'locale-loader': './webpack/locale-loader',
    backup: './webpack/backup',
    restore: './webpack/restore',
    'csv-import': './webpack/csv-import',
    'admin-dashboard': './webpack/admin-dashboard',
    'get-started': './webpack/get-started',
    'church-info': './webpack/church-info',
    localization: './webpack/localization',
    'system-settings-panel': './webpack/system-settings-panel',
    'kiosk-registration-closed': './webpack/kiosk-registration-closed',
    kiosk: './webpack/kiosk',
    'people-list': './webpack/people/person-list',
    'people-family-list': './webpack/people/family-list',
    'people-family-view': './webpack/people/family-view',
    'people-person-view': './webpack/people/person-view',
    'error': './webpack/error',
    'groups-sundayschool-dashboard': './webpack/groups-sundayschool-dashboard',
    'groups-sundayschool-class-view': './webpack/groups-sundayschool-class-view',
    'repeat-event-editor': './webpack/repeat-event-editor',
    'event-checkin': './webpack/event-checkin',
    'event-calendars': './webpack/event-calendars',
    'event-types': './webpack/event-types',
    'event-editor': './webpack/event-editor',
    'event-types-list': './webpack/event-types-list',
    'event-cart-to-event': './webpack/event-cart-to-event',
  },
  output: {
    path: path.resolve('./src/skin/v2'),
    filename: '[name].min.js',
    publicPath: 'auto',
  },
  externals: {
    // Leaflet is loaded as a global from skin/external/leaflet/leaflet.js (Grunt-copied).
    // Mapping it here lets webpack entries import 'leaflet' without bundling it.
    leaflet: 'L',
  },
  resolve: {
    extensions: ['.ts', '.tsx', '.js'],
    alias: {
      jquery: path.resolve(__dirname, 'node_modules/jquery'),
    },
  },
  cache: {
    type: 'filesystem',
    buildDependencies: {
      config: [__filename],
    },
  },
  devtool: isProduction ? false : 'eval-cheap-module-source-map',
  optimization: {
    moduleIds: 'deterministic',
    chunkIds: 'deterministic',
  },
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        loader: 'ts-loader',
      },
      {
        test: /\.(sa|sc|c)ss$/,
        use: [
          MiniCssExtractPlugin.loader,
          {
            loader: 'css-loader',
            options: {
              url: {
                filter: (url) => {
                  return !url.startsWith('/') && !url.startsWith('data:');
                },
              },
            },
          },
          'sass-loader',
        ],
      },
      {
        test: /\.(woff2?|ttf|eot|svg|png|jpg|gif)$/,
        type: 'asset/resource',
        generator: {
          filename: 'assets/[name].[contenthash][ext]',
        },
      },
    ],
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: '[name].min.css',
      ignoreOrder: false,
    }),
  ],
};
