/* eslint-env node */
/* eslint-disable @typescript-eslint/no-var-requires */

// This file is needed for tests to be configured

const path = require('path');

module.exports = {
    pluginOptions: {
        jestSerializer: {
            // All available options: https://github.com/beautify-web/js-beautify/blob/master/js/src/html/options.js
            formatting: {
                indent_char: ' ',
                indent_inner_html: true,
                indent_size: 4,
                inline: [],
                sep: '\n',
                unformatted: ['code', 'pre'],
            },
            removeClassTest: false,
            removeComments: false,
            removeDataTest: true,
            removeDataTestid: true,
            removeDataTestId: true,
            removeDataQa: false,
            removeDataVId: true,
            removeIdTest: false,
            removeServerRendered: true,
            stringifyObjects: false,
        },
    },
};

/* eslint-env node */
/* eslint-disable @typescript-eslint/no-var-requires */

const path = require('path');
const webpack = require('webpack');

const VueLoaderPlugin = require('vue-loader/dist/plugin').default;
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

const ncp = require('ncp').ncp;
const sass = require('sass');
const Dotenv = require('dotenv-webpack');
const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

const vueFormsBundlesDir = '../web/vue-forms-bundles';

const config = {
    entry: {
        'cart-page': './src/bundles/cartPage.ts',
        'checkout-page': './src/bundles/checkoutPage.ts',
        'confirmation-commerce-page': './src/bundles/confirmationCommercePage.ts',
        'shipping-hint': './src/bundles/shippingHint.ts',
        'cart-service': './src/bundles/cartService.ts',
        'products-teaser-slider': './src/bundles/productsTeaserSlider.ts',
        'product-price-information': './src/bundles/productPriceInformationContainer.ts',
        'similar-jobs': './src/bundles/jobDetailsPage.ts',
        'global-vue-frontend-container': './src/bundles/globalContainer.ts',
        'order-overview-page': './src/bundles/orderOverviewPage.ts',
        'order-quick-view': './src/bundles/orderQuickView.ts',
        'order-detail-page': './src/bundles/orderDetailPage.ts',
    },
    output: {
        path: path.resolve(__dirname, vueFormsBundlesDir),
        filename: '[name]-bundle.js',
    },
    resolve: {
        extensions: ['.ts', '.js', '.vue', '.json'],
        modules: [path.resolve(__dirname, 'node_modules')],
        alias: {
            'fuse.js': 'fuse.js/dist/fuse.min.js',
            '@': path.resolve('src'),
        },
    },
    module: {
        rules: [
            {
                test: /\.vue$/,
                loader: 'vue-loader',
                options: {
                    compilerOptions: {
                        isCustomElement: (tag) => tag === 'lottie-player',
                    },
                },
            },
            {
                test: /\.ts$/,
                exclude: /node_modules/,
                use: {
                    loader: 'ts-loader',
                    options: {
                        onlyCompileBundledFiles: true,
                        appendTsSuffixTo: [/\.vue$/],
                        transpileOnly: true,
                    },
                },
            },
            {
                test: /\.scss$/,
                use: [
                    'vue-style-loader',
                    'css-loader',
                    {
                        loader: 'sass-loader',
                        options: {
                            implementation: sass,
                            sourceMap: false, // On chrome there is an issue that when changing css in dev console, it breaks page. No source map fixes it.
                            sassOptions: {
                                quietDeps: true, // Disable warning messages from dependencies
                            },
                        },
                    },
                ],
            },
        ],
    },
    watchOptions: {
        ignored: /node_modules/,
        aggregateTimeout: 150,
    },
    plugins: [
        new webpack.DefinePlugin({
            __VUE_OPTIONS_API__: true,
            __VUE_PROD_DEVTOOLS__: false,
        }),
        new ForkTsCheckerWebpackPlugin({
            async: true,
            typescript: {
                extensions: {
                    vue: {
                        enabled: true,
                        compiler: '@vue/compiler-sfc',
                    },
                },
            },
            issue: { exclude: [{ code: 'TS1192' }] }, // ignore `no default export` errors as known plugin issue
        }),
        // new BundleAnalyzerPlugin(),
    ],
    optimization: {
        splitChunks: {
            cacheGroups: {
                vendor: {
                    test: /[\\/]node_modules[\\/]((?!(awesome-phonenumber)).*)[\\/]/,
                    name: 'vendors-vue-3',
                    chunks: 'all',
                    minChunks: 3,
                    reuseExistingChunk: true,
                },
            },
        },
    },
};

module.exports = (env, argv) => {
    config.plugins.push(
        new Dotenv({
            path: `./.env`,
        })
    );

    if (argv.mode === 'development') {
        config.devtool = 'source-map';
        config.watch = true;
        config.watchOptions = {
            aggregateTimeout: 250,
            ignored: ['node_modules'],
        };
    }

    return config;
};