import { defineConfig } from 'cypress';
import { Configuration, DefinePlugin } from 'webpack';

const webpackConfig: Configuration = {
    resolve: {
        extensions: ['...', '.jsx', '.ts', '.tsx'],
    },
    plugins: [
        // needed because @splunk/olly-timeseries-viz depends on @splunk/apm-common,
        // which includes some files that try to read `process.env`
        new DefinePlugin({
            'process.env.LOCAL': JSON.stringify('false'),
            'process.env.API_HOST': JSON.stringify(''),
            'process.env.USER': JSON.stringify('cypress'),
            'process.env.LAUNCH_DARKLY_API_KEY': JSON.stringify(''),
            'process.env.BUILD_NUMBER': JSON.stringify('-1'),
            'process.env.APP_LOCALHOST_PROXY_REDIRECT_PROFILING_API': JSON.stringify(''),
            'process.env.ORG_ID': JSON.stringify(''),
        }),
    ],
    module: {
        rules: [
            {
                test: /\.(js|jsx|ts|tsx)$/,
                exclude: [/(node_modules)/],
                use: {
                    loader: 'babel-loader',
                },
            },
            {
                test: /\.(png|woff|woff2|eot|ttf|svg|ico|gif|jpg)$/,
                use: {
                    loader: 'url-loader',
                    options: {
                        limit: 50000, // max 50kb
                        fallback: 'file-loader',
                        outputPath: 'assets',
                    },
                },
            },
            {
                test: /\.css$/i,
                use: ['style-loader', 'css-loader'],
            },
        ],
    },
};

export default defineConfig({
    viewportHeight: 1080,
    viewportWidth: 1920,
    projectId: 'abt24k',

    component: {
        devServer: {
            framework: 'react',
            bundler: 'webpack',
            webpackConfig,
        },
    },
});