// import '../src/index.css' // This has to be imported as early as possible
import { type Preview } from '@storybook/react-vite'
import React from 'react'
import { Container } from '../src/components'
import { StylesheetProvider } from '../src/providers'

const radiusMap = {
  none: 0,
  sm: 0.5,
  md: 1,
  lg: 2,
  xl: 4,
}

const colorMap = {
  red: '#dc2626',
  orange: '#ea580c',
  amber: '#d97706',
  yellow: '#eab308',
  lime: '#a3e635',
  green: '#22c55e',
  emerald: '#10b981',
  teal: '#14b8a6',
  cyan: '#06b6d4',
  sky: '#0ea5e9',
  blue: '#3b82f6',
  indigo: '#6366f1',
  violet: '#8b5cf6',
  purple: '#9333ea',
  fuchsia: '#d946ef',
  pink: '#ec4899',
}

/** @type { import('@storybook/react-vite').Preview } */
const preview: Preview = {
  initialGlobals: {
    themeMode: 'light',
    radius: 'md',
    variant: 'solid',
    color: 'blue',
  },
  globalTypes: {
    themeMode: {
      toolbar: {
        dynamicTitle: true,
        title: 'Theme',
        icon: 'mirror',
        items: ['light', 'dark'],
      },
    },
    radius: {
      toolbar: {
        title: 'Radius',
        dynamicTitle: true,
        icon: 'button',
        items: Object.keys(radiusMap),
      },
    },
    variant: {
      toolbar: {
        title: 'Variant',
        dynamicTitle: true,
        icon: 'expandalt',
        items: ['solid', 'soft'],
      },
    },
    color: {
      toolbar: {
        title: 'Color',
        dynamicTitle: true,
        icon: 'paintbrush',
        items: Object.keys(colorMap),
      },
    },
  },
  parameters: {
    controls: {
      matchers: {
        color: /(background|color)$/i,
        date: /Date$/i,
      },
    },
  },
  decorators: [
    (Story, context) => {
      // Full-surface stories (e.g. the whole Chat) render their own Container +
      // providers, so the sub-component wrapper below would double-nest them
      // (two Containers / LazyMotion / ModalProvider) and break rendering. Let
      // those stories opt out and supply their own frame.
      if (context.parameters?.fullSurface) {
        return <Story />
      }
      const { themeMode, variant, radius, color } = context.globals
      return (
        // TODO: These css hacks should not be required
        <Container
          className="bpReset bpContainer"
          style={{ width: '400px', border: 'none', backgroundColor: 'transparent' }}
        >
          <StylesheetProvider {...{ themeMode, variant, radius: radiusMap[radius], color: colorMap[color] }} />
          <Story />
        </Container>
      )
    },
  ],
}

export default preview