const path = require('path');
const fs = require('fs');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { htmlWebpackPluginTemplateCustomizer }  = require('template-ejs-loader')

const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const DeferredAssetsPlugin = require('./webpack-plugins/DeferredAssetsPlugin.js');

const hpGallery = require('./src/pages/home/gallery.js');
const brandName = 'BIAMMA Solutions';

const navLinks = {
  it: {
    portfolio: {
      header: true,
      url: 'templates.html',
      label: 'Templates'
    },
    contactus: {
      header: true,
      url: 'contatti.html',
      label: 'Contatti'
    },
    privacy: {
      header: false,
      url: 'privacy-policy.html',
      label: 'Privacy Policy'
    },
    cookie: {
      header: false,
      url: 'cookie-policy.html',
      label: 'Cookie Policy'
    },
    aboutus: {
      header: true,
      url: 'chi-siamo.html',
      label: 'Chi Siamo'
    }
  }
}
const globalVars = {
  brandName: brandName,
  mailTo: 'tobedefined@email.com',
  navLinks: navLinks
};

try {
  const criticalContent = fs.readFileSync('src/css/critical.css', 'utf8');
  globalVars['criticalContent'] = criticalContent;
} catch (err) {
  console.error(err);
}

module.exports = {
  entry: {
    commons: './src/js/commons.js',
    home: './src/js/home.js',
    'contact-us': './src/js/contact-us.js',
    'about-us': './src/js/about-us.js',
    portfolio: './src/js/portfolio.js'
  },
  output: {
    filename: '[name].[contenthash].js',
    path: path.resolve(__dirname, 'public'),
  },
  stats: {
    children: true
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      },
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader']
      },
      {
        test: /\.ejs$/i,
        use: ['html-loader', 'template-ejs-loader'],
      }
    ]
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: '[name].[contenthash].css'
    }),
    new CopyWebpackPlugin({
      patterns: [
        { from: 'src/robots.txt', to: '' }, // Copia nella directory di output
        { from: 'blocksy', to: 'blocksy' },
        { from: 'src/assets', to: 'assets'}
      ]
    }),
    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: htmlWebpackPluginTemplateCustomizer({
        templatePath: './src/template/page.ejs',
        templateEjsLoaderOption:{
          data:{
            constants: globalVars,
            bodyClass: 'page-index',
            bodyContentEjs: '../pages/home/body.ejs',
            title: 'Siti Web Aziendali Personalizzabili | ' + brandName,
            metaDescription: 'Scopri i nostri template web eleganti e personalizzabili per dare un vantaggio competitivo alla tua azienda. Velocità, reattività e accessibilità integrate.'
          }
        }
      }),
      chunks: ['commons', 'home'],
      scriptLoading: 'defer',
    }),
    new HtmlWebpackPlugin({
      filename: '404.html',
      template: htmlWebpackPluginTemplateCustomizer({
        templatePath: './src/template/page.ejs',
        templateEjsLoaderOption:{
          data:{
            constants: globalVars,
            bodyClass: 'page-404',
            bodyContentEjs: '../pages/404/body.ejs',
            title: 'Pagina Non Trovata | ' + brandName,
            customHeadlibsEjs: '../pages/404/customHeadlibs.ejs',
            description: 'La pagina che stai cercando non esiste.'
          }
        }
      })
    }),
    new HtmlWebpackPlugin({
      filename: navLinks.it.contactus.url,
      template: htmlWebpackPluginTemplateCustomizer({
        templatePath: './src/template/page.ejs',
        templateEjsLoaderOption:{
          data:{
            constants: globalVars,
            bodyClass: 'page-contacts',
            bodyContentEjs: '../pages/contactus/body.ejs',
            title: 'Realizza il tuo sito web con noi - Contattaci | ' + brandName,
            metaDescription: "Hai un’idea per un sito web? Contatta " + brandName + " e realizziamo insieme il tuo progetto digitale. Siti web su misura per il tuo business."
          }
        }
      }),
      chunks: ['commons', 'contact-us'],
      scriptLoading: 'defer',
    }),
    new HtmlWebpackPlugin({
      filename: navLinks.it.portfolio.url,
      template: htmlWebpackPluginTemplateCustomizer({
        templatePath: './src/template/page.ejs',
        templateEjsLoaderOption:{
          data:{
            constants: globalVars,
            bodyClass: 'page-portfolio',
            bodyContentEjs: '../pages/portfolio/body.ejs',
            title: 'Portfolio Progetti Web - ' + brandName + ' | Siti Web su Misura',
            metaDescription: 'Scopri i nostri progetti web realizzati per vari settori. Contatta ' + brandName + ' per sviluppare il tuo sito web su misura.',
            cards: hpGallery.cards,
            filters: hpGallery.filters
          }
        }
      }),
      chunks: ['commons', 'portfolio'],
      scriptLoading: 'defer',
    }),
    new HtmlWebpackPlugin({
      filename: navLinks.it.privacy.url,
      template: htmlWebpackPluginTemplateCustomizer({
        templatePath: './src/template/page.ejs',
        templateEjsLoaderOption:{
          data:{
            constants: globalVars,
            bodyClass: 'page-privacy-policy',
            bodyContentEjs: '../pages/privacy-policy/body.ejs',
            title: 'Informativa sulla Privacy | ' + brandName,
            metaDescription: "Leggi l'Informativa sulla Privacy di " + brandName + " per comprendere come gestiamo e proteggiamo le tue informazioni personali."
          }
        }
      }),
      chunks: ['commons'],
      scriptLoading: 'defer',
    }),
    new HtmlWebpackPlugin({
      filename: navLinks.it.aboutus.url,
      template: htmlWebpackPluginTemplateCustomizer({
        templatePath: './src/template/page.ejs',
        templateEjsLoaderOption:{
          data:{
            constants: globalVars,
            bodyClass: 'page-aboutus',
            bodyContentEjs: '../pages/about-us/body.ejs',
            title: 'Chi Siamo | ' + brandName,
            metaDescription: "In " + brandName + " trasformiamo le tue idee in soluzioni digitali di successo."
          }
        }
      }),
      chunks: ['commons', 'about-us'],
      scriptLoading: 'defer',
    }),,
    new HtmlWebpackPlugin({
      filename: navLinks.it.cookie.url,
      template: htmlWebpackPluginTemplateCustomizer({
        templatePath: './src/template/page.ejs',
        templateEjsLoaderOption:{
          data:{
            constants: globalVars,
            bodyClass: 'page-cookie-policy',
            bodyContentEjs: '../pages/cookie-policy/body.ejs',
            title: 'Informativa sui Cookie | ' + brandName,
            metaDescription: "La nostra politica sui cookie spiega l'uso dei cookie su " + brandName + " . Scopri come controllare e gestire le preferenze dei cookie."
          }
        }
      }),
      chunks: ['commons'],
      scriptLoading: 'defer',
    }),
    // Custom Plugin to Inject Deferred CSS and JS
    new DeferredAssetsPlugin(),
  ],
  devServer: {
    static: {
        directory: path.join(__dirname, 'public')
    },
    compress: true,
    port: 9900,
    hot: true,
    watchFiles: ['./src/**/*.ejs'],
  },
  optimization: {
    runtimeChunk: 'single', // Prevent duplicating runtime code
    minimizer: [
      // For webpack@5 you can use the `...` syntax to extend existing minimizers (i.e. `terser-webpack-plugin`), uncomment the next line
      // `...`,
    ]
  },
};


above is my app config. my html pages are in italian and now i want to add also english versions of them. i need a structured solution, what option do i have?