import "../app/globals.css";
import "./fonts.css";
import { MINIMAL_VIEWPORTS } from "storybook/viewport";
import { AuthModalProvider } from "../app/contexts/AuthModalContext";
import { MessagesProvider } from "../app/contexts/MessagesContext";
import { CreateFlowProvider } from "../app/(app)/create/context/CreateFlowContext";
import messages from "../messages/en/index";

/** Figma / Tailwind breakpoints from `app/tailwind.css`. */
const dsViewports = {
  sm: {
    name: "sm 430",
    styles: { width: "430px", height: "932px" },
  },
  md: {
    name: "md 640",
    styles: { width: "640px", height: "1024px" },
  },
  lg: {
    name: "lg 1024",
    styles: { width: "1024px", height: "768px" },
  },
  xl: {
    name: "xl 1440",
    styles: { width: "1440px", height: "900px" },
  },
  // Aliases used by existing page stories
  mobile1: {
    name: "sm 430",
    styles: { width: "430px", height: "932px" },
  },
  desktop: {
    name: "xl 1440",
    styles: { width: "1440px", height: "900px" },
  },
};

/** @type { import('@storybook/react').Preview } */
const preview = {
  tags: ["autodocs"],
  parameters: {
    controls: {
      matchers: {
        color: /(background|color)$/i,
        date: /Date$/i,
      },
    },
    backgrounds: {
      options: {
        dark: { name: "Dark", value: "#000000" },
        light: { name: "Light", value: "#ffffff" },
      },
    },
    viewport: {
      options: {
        ...MINIMAL_VIEWPORTS,
        ...dsViewports,
      },
    },
  },
  initialGlobals: {
    backgrounds: { value: "dark" },
  },
  decorators: [
    (Story) => (
      <MessagesProvider messages={messages}>
        <AuthModalProvider>
          <CreateFlowProvider>
            <div className="font-inter">
              <Story />
            </div>
          </CreateFlowProvider>
        </AuthModalProvider>
      </MessagesProvider>
    ),
  ],
};

export default preview;