import { withThemeByClassName } from "@storybook/addon-themes"
import type { Preview, ReactRenderer } from "@storybook/nextjs-vite"
import { IntlProvider } from "react-intl"
import { reactIntl } from "./reactIntl"

import "../lib/design-system-new-deprecated.css"
import "../lib/fonts.css"
import "../lib/normalize.css"
import "../lib/style.css"

export const themes = {
  themes: {
    Scandic: "scandic",
    "Scandic Go": "scandic-go",
    "Downtown Camper": "downtown-camper",
    "Grand Hotel": "grand-hotel",
    Haymarket: "haymarket",
    "Hotel Norge": "hotel-norge",
    Marski: "marski",
    "The Dock": "the-dock",
  },
  defaultTheme: "Scandic",
}

const preview: Preview = {
  decorators: [
    // Theme decorator
    withThemeByClassName<ReactRenderer>(themes),
    (Story) => (
      // eslint-disable-next-line @typescript-eslint/no-explicit-any
      <IntlProvider locale="en" {...(reactIntl as any)}>
        <Story />
      </IntlProvider>
    ),
  ],
  initialGlobals: {
    locale: reactIntl.defaultLocale,
    locales: {
      en: { icon: "🇬🇧", title: "English", right: "EN" },
      sv: { icon: "🇸🇪", title: "Svenska", right: "SV" },
      da: { icon: "🇩🇰", title: "Dansk", right: "DA" },
      no: { icon: "🇳🇴", title: "Norsk", right: "NO" },
      fi: { icon: "🇫🇮", title: "Suomi", right: "FI" },
      de: { icon: "🇩🇪", title: "Deutsch", right: "DE" },
    },
    backgrounds: { value: "scandicSubtle" },
  },
  parameters: {
    reactIntl,

    nextjs: {
      appDirectory: true,
    },

    docs: {
      toc: true,
    },

    controls: { matchers: { color: /(background|color)$/i, date: /Date$/i } },

    options: {
      storySort: {
        order: [
          "Introduction",
          "Tokens",
          "Core Components",
          "Product Components",
          "Patterns",
          "Compositions",
          "*",
        ],
      },
    },

    backgrounds: {
      options: {
        // 👇 Scandic
        scandicPrimary: { name: "Scandic Primary", value: "#FAF6F2" },
        scandicSubtle: { name: "Scandic Subtle", value: "#F2ECE6" },
        scandicPrimaryDark: { name: "Scandic Primary Dark", value: "#4D001B" },
        // 👇 Default values
        storybookDark: { name: "Storybook Dark", value: "#333" },
        storybookLight: { name: "Storybook Light", value: "#F7F9F2" },
      },
    },

    a11y: {
      // 'todo' - show a11y violations in the test UI only
      // 'error' - fail CI on a11y violations
      // 'off' - skip a11y checks entirely
      test: "todo",
    },
  },

  tags: ["autodocs"],
}

export default preview