/** @type { import('@storybook/react-webpack5').StorybookConfig } */
const path = require("path");

const config = {
  stories: [
    "../stories/**/*.stories.@(js|jsx|ts|tsx)",
    "../components/**/*.stories.@(js|jsx|ts|tsx)",
    "../app/**/*.stories.@(js|jsx|ts|tsx)",
  ],
  addons: [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/addon-interactions",
    "msw-storybook-addon",
  ],
  staticDirs: ["../public"],
  framework: {
    name: "@storybook/react-webpack5",
    options: {},
  },
  docs: {
    autodocs: false,
  },
  webpackFinal: async (config) => {
    config.resolve = config.resolve || {};
    config.resolve.alias = {
      ...(config.resolve.alias || {}),
      "next/link": path.resolve(__dirname, "mocks/next-link.js"),
      "next/image": path.resolve(__dirname, "mocks/next-image.js"),
      "next/router": path.resolve(__dirname, "mocks/next-router.js"),
      "next/navigation": path.resolve(__dirname, "mocks/next-navigation.js"),
      "next/headers": path.resolve(__dirname, "mocks/next-headers.js"),
      "next/cache": path.resolve(__dirname, "mocks/next-cache.js"),
    };
    config.resolve.fallback = {
      ...(config.resolve.fallback || {}),
      https: false,
      http: false,
      querystring: false,
      fs: false,
      net: false,
      tls: false,
    };

    // Ensure TS/TSX in stories compiles under the React Webpack5 framework.
    config.module = config.module || {};
    config.module.rules = [
      ...(config.module.rules || []),
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: [
          {
            loader: require.resolve("babel-loader"),
            options: {
              presets: [
                require.resolve("@babel/preset-env"),
                [require.resolve("@babel/preset-react"), { runtime: "automatic" }],
              ],
            },
          },
        ],
      },
      {
        test: /\.(ts|tsx)$/,
        exclude: /node_modules/,
        use: [
          {
            loader: require.resolve("babel-loader"),
            options: {
              presets: [
                require.resolve("@babel/preset-env"),
                [require.resolve("@babel/preset-react"), { runtime: "automatic" }],
                require.resolve("@babel/preset-typescript"),
              ],
            },
          },
        ],
      },
    ];

    // Keep absolute url() references in CSS (served from /public) instead of trying to resolve them.
    const disableCssUrlResolve = (rule) => {
      if (!rule) return;
      if (Array.isArray(rule.oneOf)) {
        rule.oneOf.forEach(disableCssUrlResolve);
      }
      if (Array.isArray(rule.use)) {
        rule.use.forEach((useEntry) => {
          if (
            useEntry &&
            typeof useEntry === "object" &&
            useEntry.loader &&
            useEntry.loader.includes("css-loader")
          ) {
            useEntry.options = { ...(useEntry.options || {}), url: false };
          }
        });
      }
    };
    (config.module.rules || []).forEach(disableCssUrlResolve);

    config.resolve.extensions = config.resolve.extensions || [".js", ".jsx"];
    if (!config.resolve.extensions.includes(".ts")) {
      config.resolve.extensions.push(".ts");
    }
    if (!config.resolve.extensions.includes(".tsx")) {
      config.resolve.extensions.push(".tsx");
    }
    return config;
  },
};

module.exports = config;