/**
 * External Dependencies
 */
const path = require('path');
const RemoveEmptyScriptsPlugin = require('webpack-remove-empty-scripts');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const MiniCSSExtractPlugin = require('mini-css-extract-plugin');
const FileManagerPlugin = require('filemanager-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const ESLintPlugin = require('eslint-webpack-plugin');
const packageJSON = require('./package.json');

const isProduction = process.env.NODE_ENV === 'production';
const localDomain = packageJSON.localDomain;
const kobudevDomain = packageJSON.kobudevDomain;
const themeName = packageJSON.name; // legacy

/**
 * WordPress Dependencies
 */
const defaultConfig = require('@wordpress/scripts/config/webpack.config.js');

// remove MiniCSSExtractPlugin if it exists in defaultConfig
defaultConfig.plugins = defaultConfig.plugins.filter((plugin) => plugin.constructor.name !== 'MiniCssExtractPlugin');

const config = {
    ...defaultConfig,
    output: {
        ...defaultConfig.output,
        path: path.resolve(__dirname, './dist'),
        filename: (pathData) => {
            return pathData.chunk.name === 'editor-styles' || pathData.chunk.name === 'editor-scripts' ? 'wp-editor/[name].js' : '[name].js';
        }
    },
    ...{
        entry: {
            styles: path.resolve(process.cwd(), 'src/styles', 'styles.scss'),
            'styles-nojs': path.resolve(process.cwd(), 'src/styles', 'no-js.scss'),
            scripts: path.resolve(process.cwd(), 'src/scripts', 'scripts.js'),
            'editor-styles': path.resolve(process.cwd(), 'src/wp-editor', 'editor-styles.scss'),
            'editor-scripts': path.resolve(process.cwd(), 'src/wp-editor', 'editor-scripts.js')
        }
    },
    plugins: [
        ...defaultConfig.plugins,
        new CleanWebpackPlugin(),
        new RemoveEmptyScriptsPlugin({
            stage: RemoveEmptyScriptsPlugin.STAGE_AFTER_PROCESS_PLUGINS
        }),
        new CopyWebpackPlugin({
            patterns: [
                { from: 'src/assets/images', to: path.resolve(__dirname, 'dist/images') },
                { from: 'src/assets/data', to: path.resolve(__dirname, 'dist/data') },
                { from: 'src/assets/animation-shapes', to: path.resolve(__dirname, 'dist/animation-shapes') },
                { from: 'src/favicon', to: path.resolve(__dirname, '') }
            ]
        }),
        // To solve missing fonts in backoffice, you need to comment MiniCSSExtractPlugin in the defaultConfig file
        new MiniCSSExtractPlugin({
            filename: (pathData) => {
                return pathData.chunk.name === 'editor-styles' || pathData.chunk.name === 'editor-scripts' ? 'wp-editor/[name].css' : '[name].css';
            }
        }),
        new ESLintPlugin({
            extensions: ['js'],
            emitWarning: true,
            failOnError: true
        }),
        new FileManagerPlugin({
            events: {
                onEnd: {
                    delete: ['./dist/editor-*']
                }
            },
            runTasksInSeries: false,
            runOnceInWatchMode: false
        })
    ],
    module: {
        rules: [
            ...defaultConfig.module.rules,
            {
                test: /\.svg$/,
                issuer: /\.(pc|sc|sa|c)ss$/,
                type: 'asset/resource',
                generator: {
                    filename: `images/[name][ext][query]`
                }
            }
        ]
    }
};

/**
 * Production settings
 */
if (isProduction) {
    config.module.rules = [
        ...config.module.rules,
        {
            test: /\.(bmp|png|jpe?g|gif|webp)$/i,
            type: 'asset/resource',
            generator: {
                filename: `images/[name][ext]`
            }
        }
    ];
}

/**
 * Development settings
 */
if (!isProduction) {
    config.devServer = {
        devMiddleware: {
            writeToDisk: true
        },
        allowedHosts: [localDomain, 'localhost', '127.0.0.1', kobudevDomain],
        host: 'localhost',
        port: 3000,
        server: 'https',
        hot: true,
        watchFiles: {
            paths: ['src/styles/**/*.scss', 'src/scripts/**/*.js', 'src/wp-editor/*', '**/*.php'],
            options: {
                ignored: ['**/*.asset.php', '**/*.map', '**/*.hot-update.*'] // Ignore unnecessary reloads
            }
        },
        client: {
            overlay: true
        },
        proxy: {
            '*': {
                target: config.url,
                secure: false
            },
            '/': {
                target: config.url,
                secure: false
            }
        }
    };
}

module.exports = config;