// @flow
import React from 'react';
import styled from 'styled-components';
import type { Node } from 'react';
import { storiesOf } from '@storybook/react';
import { withInfo } from '@storybook/addon-info';
import { SideBar } from './index';
import { configDocs } from '../../../.storybook/config-docs';
import docs from './SIDE_BAR.mkd';
import { Box } from '../../primitives';

const TallBox = styled(Box)`
  height: 500px;
`;

const Decorator = ({ children }: {| children: Node |}) => (
  <TallBox stacked="column" justify="center" align="center">
    {children}
  </TallBox>
);

storiesOf('One-off/SideBar', module)
  .addDecorator(withInfo(configDocs(docs, SideBar)))
  .add('normal', () => (
    <Decorator>
      <SideBar
        title="Best side bar ever"
        text={[
          'Some pretty long but still slight and incredibly useful text to search some purpose or something.',
          'Whoa look at me go, a second paragraph!',
        ]}
      />
    </Decorator>
  ));
