import React from 'react';
import {storiesOf} from '@storybook/react';
import {select, boolean, text} from '@storybook/addon-knobs';

import ImageUploader, {DIRECTION} from '../../Components/ImageUploader/src';

export default storiesOf('Components | ImageUploader', module)
  .add('default', () => {
    const containerStyle = {
      maxWidth: '400px',
      height: '300px',
    };

    return (
      <div style={containerStyle}>
        <ImageUploader
          title={text('Title', 'Image 400×300')}
          description={text('Description', '.png .jpg 200kb max.')}
          action={text('Action', 'Upload image')}
          elementId="image-uploader-id"
          isDisabled={boolean('isDisabled', false)}
          onDrop={(value) => console.log(value)}
          acceptFormats=".png,.jpg,.jpe,.jpeg,image/png,image/jpeg"
          direction={select('Direction', [DIRECTION.COLUMN, DIRECTION.ROW], DIRECTION.COLUMN)}
          maxSize={204800}
        />
      </div>
    );
  });