import { addParameters } from '@storybook/react';
import { withKnobs, color, array } from '@storybook/addon-knobs';
import React from 'react';
import { ThemeProvider } from '../../src/styles';

import themes from '../themes.helper';

import { WrapContainer } from '../../src';
import wrapContainerNotes from './WrapContainer.md';

export default {
  title: 'WrapContainer',
  component: WrapContainer,
  decorators: [withKnobs],
  propTablesExclude: [ThemeProvider],
};

addParameters({ info: { text: wrapContainerNotes } });

export const simple = () => {
  return <WrapContainer>This is content sample</WrapContainer>;
};

export const customization = () => {
  const group = 'Props';

  const bg = color('Background', 'wrapperBackground', group);
  const colorVal = color('Color', 'text', group);
  const py = array('Inner Padding', ['large', 'large', 'xlarge'], ',', group);

  return (
    <ThemeProvider theme={themes()}>
      <WrapContainer bg={bg} pyContent={py} color={colorVal}>
        This is content sample
      </WrapContainer>
    </ThemeProvider>
  );
};