const Encore = require('@symfony/webpack-encore');

if (!Encore.isRuntimeEnvironmentConfigured()) {
    Encore.configureRuntimeEnvironment(process.env.NODE_ENV || 'dev');
}

// Create webpack config for ext:ep_theme
Encore
    .setOutputPath('./public/typo3conf/ext/ep_theme/Resources/Public/')
    .setPublicPath('/typo3conf/ext/ep_theme/Resources/Public/')
    .addEntry('main', './public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/main.js')
    .addEntry('myep', './public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep.js')
    .addEntry('groups-calculator', './public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/groups-calculator.js')
    .addStyleEntry('rte', './public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/rte.scss')
    .splitEntryChunks()
    .enableSingleRuntimeChunk()
    .enableSassLoader()
    .enableVueLoader(() => {}, { runtimeCompilerBuild: false })
    .enableVersioning(Encore.isProduction())
    .enableSourceMaps(!Encore.isProduction())
    .cleanupOutputBeforeBuild()
    .enablePostCssLoader(options => {
        options.postcssOptions = {
            plugins: [
                require('tailwindcss'),
                require('autoprefixer'),
            ],
        }
    })
    .copyFiles([
        { from: './public/typo3conf/ext/ep_theme/Resources/Private/Assets/fonts', to: 'fonts/[name].[ext]' },
        { from: './public/typo3conf/ext/ep_theme/Resources/Private/Assets/images', to: 'images/[name].[ext]' },
        { from: './public/typo3conf/ext/ep_theme/Resources/Private/Assets/images/icons', to: 'images/icons/[name].[ext]' },
        { from: './node_modules/leaflet/dist/images', to: 'images/[name].[ext]' },
    ])
    .configureFilenames({
        js: 'js/[name].js',
        css: 'css/[name].css',
    })
    .configureImageRule({
        filename: 'images/[name][ext]',
    })
    .configureFontRule({
        filename: 'fonts/[name][ext]',
    })
    .configureBabel(function (babelConfig) {
        babelConfig.plugins = [ '@babel/plugin-proposal-object-rest-spread', '@babel/plugin-syntax-dynamic-import' ]
    })
    .configureBabelPresetEnv((config) => {
        config.shippedProposals = true
        config.useBuiltIns = 'usage'
        config.corejs = 3
    });

const EpThemeConfig = Encore.getWebpackConfig();

EpThemeConfig.name = 'EpThemeConfig';
EpThemeConfig.output.chunkFilename = 'js/[name].[chunkhash:8].js';

Encore.reset();

// Create config for ext:ep_events
Encore
    .setOutputPath('./public/typo3conf/ext/ep_events/Resources/Public/')
    .setPublicPath('/typo3conf/ext/ep_events/Resources/Public/')
    .addEntry('main', './public/typo3conf/ext/ep_events/Resources/Private/Assets/js/main.js')
    .addStyleEntry('rte', './public/typo3conf/ext/ep_events/Resources/Private/Assets/scss/rte.scss')
    .enableSingleRuntimeChunk()
    .splitEntryChunks()
    .enableSassLoader()
    .enableVueLoader()
    .autoProvidejQuery()
    .enableSourceMaps(!Encore.isProduction())
    .cleanupOutputBeforeBuild()
    .enablePostCssLoader(options => {
        options.postcssOptions = {
            plugins: [
                require('autoprefixer'),
            ],
        }
    })
    .configureFilenames({
        js: 'js/[name].js',
        css: 'css/[name].css',
    })
    .configureImageRule({
        filename: 'images/[name][ext]',
    })
    .configureFontRule({
        filename: 'fonts/[name][ext]',
    })
    .configureBabel(function (babelConfig) {
        babelConfig.plugins = [ '@babel/plugin-proposal-object-rest-spread', '@babel/plugin-syntax-dynamic-import' ]
    });

const EpEventsConfig = Encore.getWebpackConfig();
EpEventsConfig.name = 'EpEventsConfig';

module.exports = [EpThemeConfig, EpEventsConfig];