import { BuildMode, BuildPaths, BuildPlatform, buildWebpack } from '@packages/build-config';
import fs from 'fs';
import MiniCssExtractPlugin from 'mini-css-extract-plugin';
import path from 'path';
import webpack from 'webpack';
import packageJson from './package.json';

interface EnvVariables {
    mode?: BuildMode;
    analyzer?: boolean;
    port?: number;
    platform?: BuildPlatform;
}

export default (env: EnvVariables) => {
    const paths: BuildPaths = {
        output: path.resolve(__dirname, 'build'),
        entry: path.resolve(__dirname, 'index.tsx'),
        html: path.resolve(__dirname, 'index.html'),
        public: path.resolve(__dirname, 'public'),
        src: path.resolve(__dirname, 'src'),
    }

    const config: webpack.Configuration = buildWebpack({
        port: env.port ?? 3000,
        mode: env.mode ?? 'development',
        paths,
        analyzer: env.analyzer,
        platform: env.platform ?? 'desktop'
    })
    
     const tailwindConfigPath = path.resolve(__dirname, 'tailwind.config.js');
     if (!fs.existsSync(tailwindConfigPath)) {
         console.error('tailwind.config.js does not exist. Please create it or check the path.');
         process.exit(1);
     } else {
         console.log(` tailwind.config.js found at: ${tailwindConfigPath}`);
     }
 
     const postcssConfigPath = path.resolve(__dirname, 'postcss.config.js');
     if (!fs.existsSync(postcssConfigPath)) {
         console.error('postcss.config.js does not exist. Please create it or check the path.');
         process.exit(1);
     } else {
         console.log(`postcss.config.js found at: ${postcssConfigPath}`);
     }

    if(!config.plugins) {
        console.error('No plugins found in webpack configuration');
        process.exit(1);
    }

    if(config.module && config.module.rules) {
        config.module.rules.push({
            test: /\.css$/,
            use: [
                env.mode === 'development' ? 'style-loader' : MiniCssExtractPlugin.loader,
                'css-loader',
                'postcss-loader'
            ]
        });
    }


    config.plugins.push(
        new MiniCssExtractPlugin({
            filename: '[name].[contenthash].css',
        }),
        new webpack.container.ModuleFederationPlugin({
        name: 'todo_thingy',
        filename: 'remoteEntry.js',
        remotes: {
            main: 'todo_thingy@http://localhost:3001/remoteEntry.js',
        },
        shared: {
            ...packageJson.dependencies,
            'react': {
                eager: true,
                requiredVersion: packageJson.dependencies['react'],
            },
            'react-router-dom': {
                eager: true,
                requiredVersion: packageJson.dependencies['react-router-dom'],
            },
            'react-dom': {
                eager: true,
                requiredVersion: packageJson.dependencies['react-dom'],
            },
        },

    }))

    return config;
}