import React from 'react';
import { storiesOf } from '@storybook/react';
import { select, text, boolean } from '@storybook/addon-knobs';
import OptionsHelper from '../../utils/helpers/options-helper';
import Portrait from './portrait';
import { notes, info } from './documentation';

storiesOf('Portait', module).add(
  'default',
  () => {
    const alt = text('alt', Portrait.defaultProps.alt);
    const darkBackground = boolean('darkBackground', Portrait.defaultProps.darkBackground);
    const gravatar = text('gravatar');
    const initials = text('initials', 'AZ');
    const shape = select('shape', OptionsHelper.shapesVaried, Portrait.defaultProps.shape);
    const size = select('size', OptionsHelper.sizesFull, Portrait.defaultProps.size);
    const src = text('src');

    return (
      <Portrait
        alt={ alt }
        darkBackground={ darkBackground }
        gravatar={ gravatar }
        initials={ initials }
        shape={ shape }
        size={ size }
        src={ src }
      />
    );
  },
  {
    info: { text: info },
    notes: { markdown: notes }
  }
);

@@ -309,28 +309,134 @@
 ule)
+%0A  
 .add
-(%0A  'default',%0A 
+Parameters(%7B%0A    info: %7B%0A      text: info%0A    %7D,%0A    notes: %7B%0A      markdown: notes%0A    %7D%0A  %7D)%0A%0A  .add('with initials',
  () 
@@ -853,37 +853,8 @@
 ze);
-%0A    const src = text('src');
 %0A%0A  
@@ -1058,107 +1058,630 @@
     
-  src=%7B src %7D%0A      /%3E%0A    );%0A  %7D,%0A  %7B%0A    info: %7B text: info %7D,%0A    notes: %7B markdown: notes %7D%0A  %7D%0A
+/%3E%0A    );%0A  %7D)%0A%0A  .add('with avatar', () =%3E %7B%0A    const alt = text('alt', Portrait.defaultProps.alt);%0A    const darkBackground = boolean('darkBackground', Portrait.defaultProps.darkBackground);%0A    const gravatar = text('gravatar');%0A    const shape = select('shape', OptionsHelper.shapesVaried, Portrait.defaultProps.shape);%0A    const size = select('size', OptionsHelper.sizesFull, Portrait.defaultProps.size);%0A    const src = text('src');%0A%0A    return (%0A      %3CPortrait%0A        alt=%7B alt %7D darkBackground=%7B darkBackground %7D%0A        gravatar=%7B gravatar %7D shape=%7B shape %7D%0A        size=%7B size %7D src=%7B src %7D%0A      /%3E%0A    );%0A  %7D
 );%0A

add portrait with initials