// @flow
import React, { useState } from 'react';
import { action } from '@storybook/addon-actions';
import { FileUploader } from './file-uploader.component';
import docs from './file-uploader.mdx';

export default {
  component: FileUploader,
  title: 'One-off/FileUploader',
  parameters: {
    docs: {
      page: 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 WithoutFiles = () => <FileUploader {...defaultProps} />;

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

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

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

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

  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}
    />
  );
};
