import { withThemeByClassName } from '@storybook/addon-themes'

import type { Preview, ReactRenderer } from '@storybook/nextjs-vite'

import '../lib/fonts.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',
  },
  defaultTheme: 'Scandic',
}

const preview: Preview = {
  decorators: [withThemeByClassName<ReactRenderer>(themes)],
  parameters: {
    docs: {
      toc: true,
    },
    controls: { matchers: { color: /(background|color)$/i, date: /Date$/i } },
    options: {
      storySort: {
        order: ['Introduction', 'Global', 'Components', 'Compositions', '*'],
      },
    },
    backgrounds: {
      values: [
        // 👇 Scandic
        { name: 'Scandic Primary', value: '#FAF6F2' },
        { name: 'Scandic Subtle', value: '#F2ECE6' },
        { name: 'Scandic Primary Dark', value: '#4D001B' },
        // 👇 Default values
        { name: 'Storybook Dark', value: '#333' },
        { name: 'Storybook Light', value: '#F7F9F2' },
      ],
      default: 'Scandic Primary',
    },
  },
  tags: ['autodocs'],
}

export default preview