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', 'Global', 'Components', '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