import { useState } from "react";
import {
  Meta,
  Preview,
  Props,
  Story,
  SourceState,
} from "@storybook/addon-docs/blocks";
import { ComponentHeading, Code } from "../../storybook-components";
import { Banner } from "../Banner";
import { Label } from "../Label";
import { FormGroup } from "../FormGroup";
import { Button } from "../Button";
import { InputFeedback } from "../InputFeedback";
import { STATUS_VARIANT } from "../../types";
import { FileUploadDnD } from ".";

<Meta title="Components/Forms/File Upload" component={FileUploadDnD} />

<ComponentHeading
  componentName="FileUploadDnD"
  description="A component for uploading one or multiple files"
  sourcePath="src/components/FileUpload/FileUploadDnD.tsx"
/>

<Banner
  title="The `FileUpload` component is deprecated"
  className="mt-8"
  variant={STATUS_VARIANT.WARNING}
  withIcon
>
  Use the <Code>FileUploadDnD</Code> component instead. It adds drag and drop
  functionality on top of the original <Code>FileUpload</Code>, but has a
  different API.
</Banner>

The `FileUploadDnD` component is a styled label that wraps an HTML `<input type="file" />` element. Props can be passed to the component to style and position it, and the `inputProps` object can be used to pass attributes to the native input element.

It also includes drag and drop functionality that works independently of the underlying `<input />`.

```jsx
import { FileUploadDnD } from "@aptible/arrow-ds";
```

<Preview withSource={SourceState.OPEN}>
  <Story name="FileUpload">
    {() => {
      const [file, setFile] = useState(null);
      return (
        <FileUploadDnD
          onChange={setFile}
          value={file}
          label="Select image file"
          accept="image/gif,image/jpeg,image/tiff,image/svg+xml,image/png"
        />
      );
    }}
  </Story>
</Preview>

## Props

Extends `React.HTMLProps<HTMLLabelElement>`

<Props of={FileUploadDnD} />

## Demos

### Multiple files

<Preview>
  <Story name="Multiple">
    {() => {
      const [file, setFile] = useState(null);
      return (
        <FileUploadDnD
          multiple
          onChange={setFile}
          value={file}
          label="Select images"
          accept="image/gif,image/jpeg,image/tiff,image/svg+xml,image/png"
        />
      );
    }}
  </Story>
</Preview>

## Within FormGroup

<Preview>
  <Story name="WithinFormGroup">
    {() => {
      const [error, setError] = useState(false);
      const [file, setFile] = useState(null);
      const handleSubmit = (event) => {
        event.preventDefault();
        setError(!file);
      };
      return (
        <form onSubmit={handleSubmit}>
          <FormGroup
            isRequired
            variant={error ? STATUS_VARIANT.DANGER : STATUS_VARIANT.DEFAULT}
            id="important-file"
          >
            <Label>Upload PDF</Label>
            <FileUploadDnD
              onChange={setFile}
              value={file}
              label="Select PDF"
              accept="application/pdf"
            />
            {error && <InputFeedback>You must select a file</InputFeedback>}
          </FormGroup>
          <Button type="submit">Submit</Button>
        </form>
      );
    }}
  </Story>
</Preview>

### Error State

This file uploader will show an error regardless of what file type you give it.

<Preview>
  <Story name="Error">
    {() => {
      const [file, setFile] = useState(null);
      return (
        <FileUploadDnD
          multiple
          onChange={setFile}
          value={file}
          label="Select any file"
          accept="not/a/real/type"
        />
      );
    }}
  </Story>
</Preview>