import "@repo/config-tailwind/styles.css"
import { defaultTranslationValues } from "@repo/i18n/config"
import i18nMessagesEnglish from "@repo/i18n/translations/en-US.json"
import { LOCALE_DEFAULT } from "@repo/utils/constants"
import type { Preview } from "@storybook/react"
import { NextIntlClientProvider } from "next-intl"
import { ThemeProvider as NextThemeProvider } from "next-themes"
import React from "react"

const preview: Preview = {
  parameters: {
    nextjs: {
      appDirectory: true,
    },
    options: {
      storySort: {
        order: ["Design System", "Layout", "Errors"],
      },
    },
    backgrounds: { disable: true },
    darkMode: {
      darkClass: "dark",
      lightClass: "light",
      classTarget: "html",
      stylePreview: true,
    },
    controls: {
      disableSaveFromUI: true,
      matchers: {
        color: /(background|color)$/i,
        date: /Date$/i,
      },
    },
  },
  decorators: [
    (Story) => {
      return (
        <NextThemeProvider enableColorScheme={false}>
          <NextIntlClientProvider
            messages={i18nMessagesEnglish}
            locale={LOCALE_DEFAULT}
            defaultTranslationValues={defaultTranslationValues}
            timeZone={process.env["TZ"] ?? "UTC"}
          >
            <Story />
          </NextIntlClientProvider>
        </NextThemeProvider>
      )
    },
  ],
}

export default preview