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
      creatable={boolean('Creatable', false)}
      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
      creatable={boolean('Creatable', false)}
      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')}
    >
      <Bullet borderColor="neutral" borderTint="lightest" color="ruby" />
    </Avatar>
  ))
  .add('With counter', () => (
    <Avatar
      creatable={boolean('Creatable', false)}
      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')}
    >
      <Counter color="ruby" count={15} maxCount={6} borderColor="neutral" borderTint="lightest" />
    </Avatar>
  ))
  .add('With tooltip', () => (
    <TooltippedAvatar
      creatable={boolean('Creatable', false)}
      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')}
      tooltip={<TextBody>I am the tooltip</TextBody>}
    />
  ));

@@ -875,32 +875,91 @@
 %5D.image : null%7D%0A
+      onClick=%7B() =%3E console.log('Clicked on the avatar')%7D%0A
       onImageCha
@@ -990,32 +990,76 @@
 Change image')%7D%0A
+      selected=%7Bboolean('Selected', false)%7D%0A
       size=%7Bsele
@@ -1451,16 +1451,26 @@
  %3CAvatar
+%0A         
  key=%7Bin
@@ -1473,16 +1473,26 @@
 =%7Bindex%7D
+%0A         
  imageUr
@@ -1500,16 +1500,135 @@
 =%7Bimage%7D
+%0A          onClick=%7B() =%3E console.log('Clicked on the avatar')%7D%0A          selected=%7Bboolean('Selected', false)%7D%0A       
  /%3E%0A    
@@ -2023,32 +2023,76 @@
 Change image')%7D%0A
+      selected=%7Bboolean('Selected', false)%7D%0A
       size=%7Bsele
@@ -2633,32 +2633,76 @@
 Change image')%7D%0A
+      selected=%7Bboolean('Selected', false)%7D%0A
       size=%7Bsele
@@ -3222,32 +3222,32 @@
 %5D.image : null%7D%0A
-
       onImageCha
@@ -3282,24 +3282,68 @@
 ge image')%7D%0A
+      selected=%7Bboolean('Selected', false)%7D%0A
       size=%7B

Update stories