import React from 'react';
import { storiesOf } from '@storybook/react';
import { boolean, number, select, text } from '@storybook/addon-knobs';
import { Avatar, AvatarStack, Bullet, Counter, TextBody, Tooltip } from '../src';
import avatars from './static/data/avatar';

const directions = ['horizontal', 'vertical'];
const sizes = ['tiny', 'small', 'medium', 'large', 'hero'];
const shapes = ['circle', 'rounded'];

const TooltippedAvatar = Tooltip(Avatar);

storiesOf('Avatars', module)
  .addParameters({
    info: {
      propTablesExclude: [Bullet, Counter],
    },
  })
  .add('Avatar', () => (
    <Avatar
      editable={boolean('Editable', false)}
      fullName={text('Full name', 'John Doe')}
      id={text('Id', '63227a3c-c80b-11e9-a32f-2a2ae2dbcce4')}
      imageUrl={boolean('Image available', false) ? avatars[0].image : null}
      onImageChange={() => console.log('Change image')}
      size={select('Size', sizes, 'large')}
      shape={select('Shape', shapes, 'circle')}
    />
  ))
  .add('AvatarStack', () => (
    <AvatarStack
      direction={select('Direction', directions, 'horizontal')}
      displayMax={number('Display max', 5)}
      inverse={boolean('Inverse', false)}
      size={select('Size', sizes, 'large')}
    >
      {avatars.map(({ image }, index) => (
        <Avatar key={index} imageUrl={image} />
      ))}
    </AvatarStack>
  ))
  .add('With bullet', () => (
    <Avatar
      editable={boolean('Editable', false)}
      fullName={text('Full name', 'John Doe')}
      id="63227a3c-c80b-11e9-a32f-2a2ae2dbcce4"
      imageUrl={boolean('Image available', false) ? avatars[0].image : null}
      onImageChange={() => console.log('Change image')}
      size={select('Size', sizes, 'large')}
      shape={select('Shape', shapes, 'circle')}
    >
      <Bullet borderColor="neutral" borderTint="lightest" color="ruby" />
    </Avatar>
  ))
  .add('With counter', () => (
    <Avatar
      editable={boolean('Editable', false)}
      fullName={text('Full name', 'John Doe')}
      id="63227a3c-c80b-11e9-a32f-2a2ae2dbcce4"
      imageUrl={boolean('Image available', false) ? avatars[0].image : null}
      onImageChange={() => console.log('Change image')}
      size={select('Size', sizes, 'large')}
      shape={select('Shape', shapes, 'circle')}
    >
      <Counter color="ruby" count={15} maxCount={6} borderColor="neutral" borderTint="lightest" />
    </Avatar>
  ))
  .add('With tooltip', () => (
    <TooltippedAvatar
      editable={boolean('Editable', false)}
      fullName={text('Full name', 'John Doe')}
      id="63227a3c-c80b-11e9-a32f-2a2ae2dbcce4"
      imageUrl={boolean('Image available', false) ? avatars[0].image : null}
      onImageChange={() => console.log('Change image')}
      size={select('Size', sizes, 'large')}
      shape={select('Shape', shapes, 'circle')}
      tooltip={<TextBody>I am the tooltip</TextBody>}
    />
  ));

@@ -599,32 +599,78 @@
 %3E (%0A    %3CAvatar%0A
+      creatable=%7Bboolean('Creatable', false)%7D%0A
       editable=%7B
@@ -689,32 +689,32 @@
 table', false)%7D%0A
-
       fullName=%7B
@@ -1449,32 +1449,78 @@
 %3E (%0A    %3CAvatar%0A
+      creatable=%7Bboolean('Creatable', false)%7D%0A
       editable=%7B
@@ -1595,33 +1595,45 @@
 Doe')%7D%0A      id=
-%22
+%7Btext('Id', '
 63227a3c-c80b-11
@@ -1644,33 +1644,35 @@
 32f-2a2ae2dbcce4
-%22
+')%7D
 %0A      imageUrl=
@@ -2019,24 +2019,70 @@
     %3CAvatar%0A
+      creatable=%7Bboolean('Creatable', false)%7D%0A
       editab
@@ -2161,33 +2161,45 @@
 Doe')%7D%0A      id=
-%22
+%7Btext('Id', '
 63227a3c-c80b-11
@@ -2210,33 +2210,35 @@
 32f-2a2ae2dbcce4
-%22
+')%7D
 %0A      imageUrl=
@@ -2620,24 +2620,70 @@
 ippedAvatar%0A
+      creatable=%7Bboolean('Creatable', false)%7D%0A
       editab
@@ -2770,17 +2770,29 @@
      id=
-%22
+%7Btext('Id', '
 63227a3c
@@ -2819,17 +2819,19 @@
 e2dbcce4
-%22
+')%7D
 %0A      i

Update stories