import React from 'react';

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

import theme from '../src/theme';

// .storybook/preview.js
export const parameters = {
  options: {
    storySort: {
      order: ['StyleGuide', 'Components', 'Fields', 'App Layout'],
    },
  },
  actions: {},
  layout: 'fullscreen',
  backgrounds: { disable: true, grid: { disable: true } },
  chakra: {
    theme,
  },
};

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

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