// @flow
import React, { useState } from 'react';
import { storiesOf } from '@storybook/react';
import { action } from '@storybook/addon-actions';
import { withInfo } from '@storybook/addon-info';
import { FileUploader } from './index';
import docs from './FILE-UPLOADER.mkd';
import { configDocs } from '../../../.storybook/config-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."
  />
);

const Interactive = () => {
  const [attachments, setAttachments] = useState<File[]>([]);

  const onDrop = (file: File[]) => {
    setAttachments([...attachments, ...file]);
  };

  const remove = (file: File) => {
    setAttachments(
      attachments.filter((attachment) => attachment.name !== file.name),
    );
  };

  return (
    <FileUploader
      {...defaultProps}
      attachments={attachments}
      onDropAttachmentHandler={onDrop}
      onClickRemoveHandler={remove}
    />
  );
};

storiesOf('One-off/FileUploader', module)
  .addDecorator(withInfo(configDocs(docs, FileUploader)))

  .add('without files', () => storyWithoutFiles)
  .add('with files', () => storyWithFiles)
  .add('with files (save pending)', () => storyWithFilesSavePending)
  .add('with error', () => storyWithError)
  .add('interactive', Interactive);
