const Encore = require('@symfony/webpack-encore');
const path = require('path');
const process = require('process');
const WpjResolver = require('../../web/common/webpack/WpjResolver');
const webpack = require('webpack');

const rootDir = process.cwd();

Encore
   // directory where compiled assets will be stored
   .setOutputPath('admin/static/build/')
   // public path used by the web server to access the output path
   .setPublicPath('/admin/static/build/')

   .addEntry('icons', '@assets/entrypoints/icons.js')
   .addEntry('app', '@assets/entrypoints/app.js')
   .addEntry('board', '@assets/entrypoints/board.js')
   .addEntry('window', '@assets/entrypoints/window.js')
   .addEntry('list', '@assets/entrypoints/list.js')
   .addEntry('listEdit', '@assets/entrypoints/listEdit.js')
   .addEntry('translate', '@assets/entrypoints/translate.js')

   .enableSourceMaps(true)
   // enables hashed filenames (e.g. app.abc123.css)
   .enableVersioning(Encore.isProduction())
   .disableSingleRuntimeChunk()
   .enableReactPreset()

   // uncomment if you use TypeScript
   .enableTypeScriptLoader()

   // uncomment if you use Sass/SCSS files
   .enableSassLoader(options => {
      // https://github.com/sass/node-sass#options
      options.sassOptions.includePaths = ['common/static/compass/', 'common'];
      options.implementation = require('sass');
   })
   .enablePostCssLoader(options => {
      options.postcssOptions = {
         // the directory where the postcss.config.js file is stored
         config: 'admin/webpack/'
      };
   }).addPlugin(
      new webpack.DefinePlugin({
         ADMIN: true
      })
   )
   .configureDevServerOptions(options => {
      options.server = {
         type: 'https',
         options: {
            cert: '/etc/ssl/cert.pem',
            key: '/etc/ssl/key.pem',
         },
      };
      options.hot = true;
      options.allowedHosts = 'all';
      options.host = '0.0.0.0';
      options.client = {
         overlay: true,
       };
      options.proxy = {
         secure: false,
         context: () => true,
         target: 'https://localhost'
      };
   });

if (Encore.isDevServer()) {
   Encore.disableCssExtraction();
} else {
   //Encore.cleanupOutputBeforeBuild();
}

const EncoreProxy = new Proxy(Encore, {
   get: (target, prop) => {
      if (prop === 'getWebpackConfig') {
         return (...parameters) => {
            const config = target[prop](...parameters);

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

            const loaders = [];

            if (!Encore.isDevServer()) {
               loaders.push(MiniCssExtractPlugin.loader);
            } else {
               loaders.push('style-loader');
            }

            // config.stats = 'verbose';
            // config.resolve.modules = [path.join(rootDir, 'engine/node_modules'), path.join(rootDir, 'node_modules')];
            // config.resolveLoader = config.resolve;
            config.module.rules.push({
               test: /\.font\.js/,
               use: [
                  ...loaders,
                  {
                     loader: 'css-loader',
                  },
                  {
                     loader: 'webfonts-loader',
                     options: {
                        publicPath: '/admin/static/build/'
                     }
                  }
               ]
            });

            const WpjResolver = require('./WpjResolver.js');

            config.resolve.plugins = [
               new WpjResolver({
                  rule: /^@assets/,
                  paths: {
                     common: 'admin/webpack/assets/'
                  }
               }),
               new WpjResolver({
                  rule: /^@static/,
                  paths: {
                     common: 'admin/static/'
                  }
               }),
               new WpjResolver({
                  rule: /^@hack/,
                  paths: {
                     shop: './admin/static/build' + path.resolve(__dirname, 'assets/fonts/')
                  }
               })
            ];

            return config;
         };
      }

      return (...parameters) => {
         const res = target[prop](...parameters);
         return (res === target) ? EncoreProxy : res;
      };
   }
});

module.exports = EncoreProxy.getWebpackConfig();