import '@mantine/core/styles.css';

import type { Decorator } from '@storybook/react-vite';

import { MantineProvider } from '@mantine/core';
import { ModalsProvider } from '@mantine/modals';

import { GlobalStateStoreProvider } from '../src/GlobalStateStore';

export const PreviewDecorator: Decorator = (Story, context) => {
  const { parameters, globals } = context;
  const colorScheme = globals.colorScheme as 'light' | 'dark';

  // Allow stories to opt-out of GlobalStateStore provider
  const useGlobalStore = parameters.globalStore !== false;

  // Use 100% for fullscreen layout, 100vh otherwise
  const isFullscreen = parameters.layout === 'fullscreen';
  const containerStyle = {
    height: isFullscreen ? '100%' : '100vh',
    width: isFullscreen ? '100%' : '100vw',
  };

  return (
    <MantineProvider forceColorScheme={colorScheme}>
      
      <ModalsProvider>
        {useGlobalStore ? (
          <GlobalStateStoreProvider fetchOnMount={false}>
            <div style={containerStyle}>
              <Story  />
            </div>
          </GlobalStateStoreProvider>
        ) : (
          <div style={containerStyle}>
            <Story  />
          </div>
        )}
      </ModalsProvider>
    </MantineProvider>
  );
};