import type { Preview } from '@storybook/nextjs'
import { useEffect } from 'react'
import '../src/app/fonts.css'

// Decorator to handle theme changes and update HTML attributes
const ThemeDecorator = (Story: any, context: any) => {
  const backgroundValue = context.globals.backgrounds?.value
  console.log(backgroundValue,"backgroundValue")
  // Determine theme based on background value
  const theme = backgroundValue === 'dark' ? 'dark-theme' : 'light-theme'
  
  useEffect(() => {
    // Update document root attributes
    document.documentElement.setAttribute('data-theme', theme)
    
    // Update body attributes
    document.body.setAttribute('data-theme', theme)
    
    // You can also update specific elements if needed
  
  }, [theme])
  console.log("happening")
  return Story()
}

const preview: Preview = {
  parameters: {
    backgrounds: {
      default: 'light',
      options: {
        light: { name: 'light', value: '#ffe788' },
        dark: { name: 'dark', value: 'black' },
      },
    },
    controls: {
      matchers: {
        color: /(background|color)$/i,
        date: /Date$/i,
      },
    },
    a11y: {
      test: "todo"
    }
  },
  
  // Add the theme decorator
  decorators: [ThemeDecorator],
  
  initialGlobals: {
    backgrounds: { value: '#ffe788' },
  },
}

export default preview