import React from 'react';

import { Box } from '@chakra-ui/react';
import { ChakraProvider } from '@chakra-ui/react';
import { MemoryRouter } from 'react-router-dom';

import { ColorModeProvider } from '../src/components/ui/color-mode';
import { Toaster } from '../src/components/ui/toaster';
import { systemTheme } from '../src/theme/theme';

// .
const DocumentationWrapper = ({ children }) => {
  return (
    <Box id="start-ui-storybook-wrapper" p="4" pb="8" flex="1">
      {children}
    </Box>
  );
};

export const decorators = [
  (Story, context) => (
    <ColorModeProvider>
      <ChakraProvider value={systemTheme}>
        {/* Using MemoryRouter to avoid route clashing with Storybook */}
        <MemoryRouter>
          <DocumentationWrapper>
            <Story {...context} />
          </DocumentationWrapper>
        </MemoryRouter>
        <Toaster />
      </ChakraProvider>
    </ColorModeProvider>
  ),
];