import React from 'react';

import { storiesOf } from '@storybook/react';
import { withKnobs, number, text, array } from '@storybook/addon-knobs';

import Image from './index';
import ImageDocs from './Image.md';
import rectPlaceholder from '../../../../assets/images/placeholder/800x400.png';
import circPlaceholder from '../../../../assets/images/placeholder/250x250.png';

storiesOf('atoms/media', module).addDecorator(withKnobs({ escapeHTML: false })).add('Image', function () {
  var props = {
    alt: text('alt', 'alt text'),
    src: text('src', rectPlaceholder),
    width: number('width', 800),
    height: number('height', 400),
    shape: text('shape', ''),
    classes: array('classes', [])
  };
  return React.createElement(Image, props);
}, { info: ImageDocs }).add('Image (circular)', function () {
  var props = {
    alt: text('alt', 'alt text'),
    src: text('src', circPlaceholder),
    width: number('width', 250),
    height: number('height', 250),
    shape: text('shape', 'circular'),
    classes: array('classes', [])
  };

  return React.createElement(Image, props);
}, { info: ImageDocs });