import MiniCssExtractPlugin from 'mini-css-extract-plugin';
const WEBPACK_SERVE = Boolean(process.env.WEBPACK_SERVE);
const mode = WEBPACK_SERVE ? 'development' : 'production';
export const isDev = mode === 'development';

/** @type { import('@storybook/html-webpack5').StorybookConfig } */
const config = {
  stories: ['../stories/**/*.mdx', '../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)', '../apps/**/*.mdx', '../apps/**/*.stories.@(js|jsx|mjs|ts|tsx)'],

  addons: [
    '@storybook/addon-webpack5-compiler-swc',
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    '@chromatic-com/storybook',
    '@storybook/addon-interactions',
    '@storybook/addon-mdx-gfm'
  ],

  framework: {
    name: '@storybook/html-webpack5',
    options: {},
  },

  webpackFinal: async (config) => {
    const newConfig = {
      ...config,
      module: {
        ...config.module,
        rules: [
          ...config.module.rules.filter((i) => {
            if (i.test instanceof RegExp && i.test.test('.css')) {
              return false;
            }
            return true;
          }),
          {
            test: /\.css$/,
            use: [
              {
                loader: !isDev ? MiniCssExtractPlugin.loader : 'style-loader',
              },
              {
                loader: 'css-loader',
                options: {
                  modules: false,
                },
              },
              {
                loader: 'postcss-loader',
                options: {
                  postcssOptions: {
                    plugins: ['tailwindcss', 'autoprefixer'],
                  },
                },
              },
            ],
          },
        ],
      },
      plugins: [
        ...config.plugins,
        // ...(config.plugins ?? [])
        //   // DocgenPlugin adds to the build time and we don't use storybook's autogenerated docs.
        //   .filter((plugin) => plugin.constructor.name !== 'DocgenPlugin'),
        // ,
        new MiniCssExtractPlugin({
          filename: '[name].bundle.css',
          chunkFilename: '[id].css',
        }),
      ],
    };
    return newConfig;
  },

  docs: {}
};
export default config;