// @flow
import React from 'react';
import { storiesOf } from '@storybook/react';
import { action } from '@storybook/addon-actions';
import { FileUploader } from './index';
import docs from './FILE-UPLOADER.mkd';
import { withDocs } from '../../../.storybook/with-docs';

const defaultProps = {
  onDropAttachmentHandler: action('onDropAttachmentHandler'),
  onClickRemoveHandler: action('onClickRemoveHandler'),
  attachments: [],
  attachmentsError: undefined,
  acceptedFileTypes: '.pdf',
  savePending: false,
  withoutFilesPrompt: 'Upload statements',
  withFilesPrompt: 'Upload additional statements',
  tip: "Tip: drag and drop as many files as you'd like into this box.",
};

const mockAttachments = [
  { name: 'first_file.pdf' },
  { name: 'second_file.pdf' },
];

export const storyWithoutFiles = <FileUploader {...defaultProps} />;

export const storyWithFiles = (
  <FileUploader {...defaultProps} attachments={mockAttachments} />
);

export const storyWithFilesSavePending = (
  <FileUploader {...defaultProps} attachments={mockAttachments} savePending />
);

export const storyWithError = (
  <FileUploader
    {...defaultProps}
    attachmentsError="There was an issue with your file upload. Please try again later."
  />
);

storiesOf('One-off/FileUploader', module)
  .add('without files', withDocs(docs)(() => storyWithoutFiles))
  .add('with files', withDocs(docs)(() => storyWithFiles))
  .add(
    'with files (save pending)',
    withDocs(docs)(() => storyWithFilesSavePending),
  )
  .add('with error', withDocs(docs)(() => storyWithError));
