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

import type { Preview, ReactRenderer } from '@storybook/react'

import 'react-material-symbols/rounded'

import '../lib/style.css'
import '../lib/fonts.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', '*'],
      },
    },
  },
  tags: ['autodocs'],
}

export default preview
