// @flow
import React, { Fragment } from 'react';
import type { storiesOf as StoriesOf } from '@storybook/react';
import { Box, Container, Section } from '../common/';
import { List, ListItem } from '../../src/';

const primaryText = 'Primary text';
const secondaryText = 'Secondary text';
const secondaryTextLong = 'This is long secondary text and this is long secondary text and this is long secondary text';
const avatar = { imageUrl: 'test.png', description: 'Test' };
const icon = 'star';
const boxWidth = 500;

export default function (storiesOf: StoriesOf) {
  storiesOf('Lists', module)
    .addDecorator(story => <Container>{story()}</Container>)
    .add('Single-Line List', () => (
      <Fragment>
        <Section title="Text only">
          <Box width={boxWidth}>
            <List>
              <ListItem {...{ primaryText }} />
              <ListItem {...{ primaryText }} />
              <ListItem {...{ primaryText }} />
            </List>
          </Box>
        </Section>
        <Section title="Text only (dense)">
          <Box width={boxWidth}>
            <List dense>
              <ListItem {...{ primaryText }} />
              <ListItem {...{ primaryText }} />
              <ListItem {...{ primaryText }} />
            </List>
          </Box>
        </Section>
        <Section title="Icon with Text">
          <Box width={boxWidth}>
            <List>
              <ListItem button icon="wifi" primaryText="Wi-Fi" />
              <ListItem button icon="bluetooth" primaryText="Bluetooth" />
              <ListItem button icon="data-usage" primaryText="Data Usage" />
            </List>
          </Box>
        </Section>
        <Section title="Avatar with text">
          <Box width={boxWidth}>
            <List>
              <ListItem {...{ avatar, primaryText }} />
              <ListItem {...{ avatar, primaryText }} />
              <ListItem {...{ avatar, primaryText }} />
            </List>
          </Box>
        </Section>
        <Section title="Avatar with Text and Icon list">
          <Box width={boxWidth}>
            <List>
              <ListItem {...{ avatar, icon, primaryText }} />
              <ListItem {...{ avatar, icon, primaryText }} />
              <ListItem {...{ avatar, icon, primaryText }} />
            </List>
          </Box>
        </Section>
      </Fragment>
    ))
    .add('Two-Line List', () => (
      <Fragment>
        <Section title="Text only">
          <Box width={boxWidth}>
            <List>
              <ListItem {...{ primaryText, secondaryText }} />
              <ListItem {...{ primaryText, secondaryText }} />
              <ListItem {...{ primaryText, secondaryText }} />
            </List>
          </Box>
        </Section>
        <Section title="Text only (dense)">
          <Box width={boxWidth}>
            <List dense>
              <ListItem {...{ primaryText, secondaryText }} />
              <ListItem {...{ primaryText, secondaryText }} />
              <ListItem {...{ primaryText, secondaryText }} />
            </List>
          </Box>
        </Section>
        <Section title="Avatar list">
          <Box width={boxWidth}>
            <List>
              <ListItem {...{ avatar, primaryText, secondaryText }} />
              <ListItem {...{ avatar, primaryText, secondaryText }} />
              <ListItem {...{ avatar, primaryText, secondaryText }} />
            </List>
          </Box>
        </Section>
        <Section title="Avatar list (dense)">
          <Box width={boxWidth}>
            <List dense>
              <ListItem {...{ avatar, primaryText, secondaryText }} />
              <ListItem {...{ avatar, primaryText, secondaryText }} />
              <ListItem {...{ avatar, primaryText, secondaryText }} />
            </List>
          </Box>
        </Section>
      </Fragment>
    ))
    .add('Three-Line List', () => (
      <Fragment>
        <Section title="Text only">
          <Box width={boxWidth}>
            <List>
              <ListItem {...{ primaryText, secondaryText: secondaryTextLong }} />
              <ListItem {...{ primaryText, secondaryText: secondaryTextLong }} />
              <ListItem {...{ primaryText, secondaryText: secondaryTextLong }} />
            </List>
          </Box>
        </Section>
        <Section title="Text only (dense)">
          <Box width={boxWidth}>
            <List dense>
              <ListItem {...{ primaryText, secondaryText: secondaryTextLong }} />
              <ListItem {...{ primaryText, secondaryText: secondaryTextLong }} />
              <ListItem {...{ primaryText, secondaryText: secondaryTextLong }} />
            </List>
          </Box>
        </Section>
        <Section title="Avatar list">
          <Box width={boxWidth}>
            <List>
              <ListItem {...{ avatar, primaryText, secondaryText: secondaryTextLong }} />
              <ListItem {...{ avatar, primaryText, secondaryText: secondaryTextLong }} />
              <ListItem {...{ avatar, primaryText, secondaryText: secondaryTextLong }} />
            </List>
          </Box>
        </Section>
        <Section title="Avatar list (dense)">
          <Box width={boxWidth}>
            <List dense>
              <ListItem {...{ avatar, primaryText, secondaryText: secondaryTextLong }} />
              <ListItem {...{ avatar, primaryText, secondaryText: secondaryTextLong }} />
              <ListItem {...{ avatar, primaryText, secondaryText: secondaryTextLong }} />
            </List>
          </Box>
        </Section>
      </Fragment>
    ));
}
