import { Box } from '@mui/material';
import { LocaleProvider } from '../Locale/context';
import LocaleSelector from '../Locale/selector';

export { default as Common404 } from './demo/common404';
export { default as Common403 } from './demo/common403';
export { default as Common500 } from './demo/common500';
export { default as CommonError } from './demo/common-error';
export { default as CommonMaintenance } from './demo/common-maintenance';
export { default as CommonComingSoon } from './demo/common-coming-soon';
export { default as Custom404Page } from './demo/custom404-page';
export { default as InfoPage } from './demo/info-page';

export default {
  title: 'Feedback/Result',

  parameters: {
    layout: 'fullscreen',

    docs: {
      description: {
        component: 'Used to provide feedback on the outcomes of a series of operational tasks.',
      },
    },
  },
  decorators: [
    (StoryFn) => (
      <TestContainer>
        <StoryFn />
      </TestContainer>
    ),
  ],
};

// eslint-disable-next-line react/prop-types
function TestContainer({ children, ...rest }) {
  return (
    <LocaleProvider locale="en" translations={{}}>
      <Box
        {...rest}
        sx={[
          {
            position: 'relative',
            height: 760,
            overflow: 'hidden',
          },
          ...(Array.isArray(rest.sx) ? rest.sx : [rest.sx]),
        ]}>
        <Box
          sx={{
            position: 'absolute',
            top: 16,
            right: 16,
          }}>
          <LocaleSelector />
        </Box>
        {children}
      </Box>
    </LocaleProvider>
  );
}
