import "@repo/config-tailwind/styles.css"
import { defaultTranslationValues } from "@repo/i18n/config"
import i18nMessagesEnglish from "@repo/i18n/translations/en-US.json"
import { ThemeProvider } from "@repo/ui/Header/SwitchTheme"
import type { Preview } from "@storybook/react"
import { NextIntlClientProvider } from "next-intl"
import React from "react"

const preview: Preview = {
  parameters: {
    nextjs: {
      appDirectory: true,
    },
    options: {
      storySort: {
        order: ["Design System", "User Interface", "Feature"],
      },
    },
    backgrounds: { disable: true },
    darkMode: {
      darkClass: "dark",
      lightClass: "light",
      classTarget: "html",
      stylePreview: true,
    },
    controls: {
      matchers: {
        color: /(background|color)$/i,
        date: /Date$/i,
      },
    },
  },
  decorators: [
    (Story) => {
      return (
        <ThemeProvider>
          <NextIntlClientProvider
            messages={i18nMessagesEnglish}
            locale="en"
            defaultTranslationValues={defaultTranslationValues}
          >
            <Story />
          </NextIntlClientProvider>
        </ThemeProvider>
      )
    },
  ],
}

export default preview