import "../src/app.css";
import type { Preview } from "@storybook/react-vite";
import { setupWorker } from "msw/browser";
import { externalApiHandlers } from "../src/lib/testing/external-api-mocks";

if (typeof window !== "undefined") {
  const worker = setupWorker(...externalApiHandlers);
  void worker.start({
    onUnhandledRequest: "bypass",
    serviceWorker: {
      url: "/mockServiceWorker.js",
    },
  });
}

const preview: Preview = {
  decorators: [
    (Story, context) => {
      const theme = context.globals.theme === "light" ? "light" : "dark";

      if (typeof document !== "undefined") {
        document.documentElement.setAttribute("data-ui-theme", theme);
      }

      return Story();
    },
  ],
  globalTypes: {
    theme: {
      description: "Dashboard component theme",
      defaultValue: "dark",
      toolbar: {
        title: "Theme",
        icon: "circlehollow",
        items: [
          { value: "dark", title: "Dark" },
          { value: "light", title: "Light" },
        ],
        dynamicTitle: true,
      },
    },
  },
  parameters: {
    backgrounds: {
      default: "canvas",
      values: [
        { name: "canvas", value: "#020302" },
        { name: "raised", value: "#0b0d0c" },
        { name: "light canvas", value: "#f3f5ed" },
        { name: "light raised", value: "#eef1e7" },
      ],
    },
    controls: {
      matchers: {
        color: /(background|color)$/i,
        date: /Date$/i,
      },
    },
    layout: "fullscreen",
  },
};

export default preview;