// @flow
import React from 'react';
import { storiesOf } from '@storybook/react';
import { ListItem } from '.';
import { Button, Checkmark, NumberedBullet } from '../../core';
import { Box } from '../../primitives/box';

import { withDocs } from '../../../.storybook/with-docs';
import docs from './LIST-ITEM.mkd';

const Header = 'Whatever you want in the header.';
const Body = 'Whatever you want in the body';
const subComponent = (
  <Button onClick={() => {}} size="sm">
    click me
  </Button>
);

storiesOf('One-off/ListItem', module)
  .add(
    'checklist',
    withDocs(docs, [Box])(() => (
      <Box>
        <ListItem icon={<Checkmark />} header={Header} body={Body} />
        <ListItem
          icon={<Checkmark />}
          header={Header}
          body={Body}
          subComponent={subComponent}
        />
        <ListItem icon={<Checkmark />} header={Header} body={Body} />
      </Box>
    )),
  )
  .add(
    'numbered list',
    withDocs(docs, [Box])(() => (
      <Box>
        <ListItem
          icon={<NumberedBullet value="1" />}
          header={Header}
          body={Body}
        />
        <ListItem
          icon={<NumberedBullet value="2" />}
          header={Header}
          body={Body}
          subComponent={subComponent}
        />
        <ListItem
          icon={<NumberedBullet value="3" disabled />}
          header={Header}
          body={Body}
        />
      </Box>
    )),
  );
