// @flow
import React from 'react';
import type { Node } from 'react';
import { storiesOf } from '@storybook/react';
import { withInfo } from '@storybook/addon-info';
import { FormList } from './index';
import { configDocs } from '../../../../.storybook/config-docs';
import docs from './FORM_LIST.mkd';
import { Grid, GridItem } from '../../structures';
import { Span } from '../../typography';
import { Box } from '../../../primitives';

const Decorator = ({ children }: {| children: Node |}) => (
  <Grid>
    <GridItem sm={4} md={4} lg={4}>
      {children}
    </GridItem>
  </Grid>
);

const items = [
  <Box spacing={['pr3', 'pl3']}>
    <Span>first item</Span>
  </Box>,
  <Box spacing={['pr3', 'pl3']}>
    <Span>second item</Span>
  </Box>,
  <Box spacing={['pr3', 'pl3']}>
    <Span>third item</Span>
  </Box>,
  <Box spacing={['pr3', 'pl3']}>
    <Span>fourth item</Span>
  </Box>,
  <Box spacing={['pr3', 'pl3']}>
    <Span>fifth item</Span>
  </Box>,
];

storiesOf('Core/Forms/FormList', module)
  .addDecorator(withInfo(configDocs(docs, FormList)))
  .add('normal', () => (
    <Decorator>
      <FormList items={items} />
    </Decorator>
  ));
