import { configure, addDecorator, addParameters } from '@storybook/react';
import GlobalStyles from '../src/global-style';
import React from 'react';
import { withThemesProvider } from 'storybook-addon-styled-component-theme';
import cwTheme from './themes/cwTheme';
import themes from '../src/themes';

import { withInfo } from '@storybook/addon-info';

function loadStories() {
  const req = require.context('../src/components', true, /\.stories\.js$/);
  req.keys().forEach(filename => req(filename));
}

function withGlobalStyles(storyFn) {
  return (
    <React.Fragment>
      <GlobalStyles />
      {storyFn()}
    </React.Fragment>
  );
}

addDecorator(
  withInfo({
    // Global configuration for the info addon across all of your stories.
    inline: true,
    header: false,
    maxPropsIntoLine: 1,
    maxPropArrayLength: 10,
    maxPropObjectKeys: 50,
  }),
);
addDecorator(withThemesProvider(themes));
addDecorator(withGlobalStyles);

addParameters({
  options: {
    theme: cwTheme,
    panelPosition: 'bottom',
  },
});

configure(loadStories, module);
