import { Canvas, Meta, Controls } from '@storybook/addon-docs/blocks';
import {
  PlaygroundInputFile,
  DoWithClearLabel,
  DoWithCaption,
  DoWithAcceptFilter,
  DoDisabled,
  DontNoLabel,
  DoWithLabel,
  DontNoErrorFeedback,
  DoWithErrorFeedback,
  DontNoCaption,
} from '../components/form/BmsInputFile.stories.js';

<Meta title="Documentation/Fields/Input File" />

# <img src="./BmsIcon.png" /> Input File

InputFile is a component for uploading one file. After upload, it shows the result. The component supports drag and drop functionality, file type filtering, size limits, and displays uploaded files with previews for images. It provides a user-friendly way to upload files in forms and interfaces.

## Anatomy

Input file components consist of several key elements: a label that describes what file is expected, a drop area where users can drag and drop files or click to browse, an optional caption for additional information like file size limits or accepted types, error messages for validation feedback, and a file preview area that shows uploaded files with the ability to remove them.

![InputFile representation](./fields/InputMediaRepresentation.png)

## Component

Use the controls below to interact with the component and see how it behaves with different configurations.

<Canvas of={PlaygroundInputFile} />

### Props

<Controls of={PlaygroundInputFile} />

## Usage Examples

### ✅ Do: Input file with clear label

Always provide a clear, descriptive label that explains what type of file is expected.

<Canvas of={DoWithClearLabel} />

### ✅ Do: Input file with caption

Use captions to provide additional context, such as file size limits, accepted file types, or format requirements.

<Canvas of={DoWithCaption} />

### ✅ Do: Input file with accept filter

Use the accept prop to restrict file types. This helps users understand what files they can upload and prevents invalid uploads.

<Canvas of={DoWithAcceptFilter} />

### ✅ Do: Disabled state

Use the disabled state when the file upload should not be available, but the current state should still be visible.

<Canvas of={DoDisabled} />

### ✅ Do: Input file with error feedback

Always provide clear error messages when validation fails. Help users understand what went wrong and how to fix it.

<Canvas of={DoWithErrorFeedback} />

## Rules

### ⛔ Don't: Missing labels

Always provide a label for accessibility and clarity. Labels help screen readers and provide context about what file is expected.

**❌ Don't:**

<Canvas of={DontNoLabel} />

**✅ Do:**

<Canvas of={DoWithLabel} />

### ⛔ Don't: No error feedback

Always provide clear error messages when validation fails. Help users understand what went wrong and how to fix it.

**❌ Don't:**

<Canvas of={DontNoErrorFeedback} />

**✅ Do:**

<Canvas of={DoWithErrorFeedback} />

### ⛔ Don't: No caption for file requirements

When file requirements are specific (size limits, file types, etc.), provide captions to help users understand what's expected.

**❌ Don't:**

<Canvas of={DontNoCaption} />

**✅ Do:**

<Canvas of={DoWithCaption} />
