import {
  Canvas,
  Controls,
  Meta,
  Story,
  Title,
  Subtitle,
} from '@storybook/addon-docs/blocks'
import * as DrawerStories from './Drawer.stories'
import { LifecycleTag, SourceLinks } from '../../docs/components'

<Meta of={DrawerStories} />

<Title>Drawer</Title>
<Subtitle>
  A drawer component that slides from the bottom of the screen with
  drag-to-dismiss functionality. Built on top of Vaul.
</Subtitle>

<SourceLinks
  links={[
    {
      label: 'Vaul',
      href: 'https://github.com/emilkowalski/vaul',
    },
  ]}
/>

<LifecycleTag variant="In Development" />

<Canvas of={DrawerStories.Default} sourceState="shown" />
<Controls />

## Components

The component family consists of the following sub-components:

- `Drawer`: The root container for the drawer.
- `DrawerTrigger`: The button that opens the drawer.
- `DrawerContent`: The content to be rendered in the open drawer.
- `DrawerHeader`: The header of the drawer.
- `DrawerFooter`: The footer of the drawer. A wrapper around `ButtonSet` that accepts all `ButtonSet` props (`size`, `orientation`, `className`).
- `DrawerTitle`: The title of the drawer.
- `DrawerDescription`: The description of the drawer.
- `DrawerClose`: The button that closes the drawer.
- `DrawerHandle`: The handle for the drawer.

## Import

```tsx
import {
  Drawer,
  DrawerClose,
  DrawerContent,
  DrawerDescription,
  DrawerFooter,
  DrawerHeader,
  DrawerTitle,
  DrawerTrigger,
} from '@chainlink/blocks'
```

## Usage

```tsx
import { Button } from '@chainlink/blocks'

export const MyDrawer = () => {
  return (
    <Drawer>
      <DrawerTrigger asChild>
        <Button variant="primary">Open Drawer</Button>
      </DrawerTrigger>
      <DrawerContent>
        <DrawerHandle />
        <DrawerHeader>
          <DrawerTitle>Drawer Title</DrawerTitle>
          <DrawerDescription>Drawer Description</DrawerDescription>
        </DrawerHeader>
        <div className="p-4">Content goes here</div>
        <DrawerFooter>
          <Button>Submit</Button>
          <DrawerClose asChild>
            <Button variant="ghost">Cancel</Button>
          </DrawerClose>
        </DrawerFooter>
      </DrawerContent>
    </Drawer>
  )
}
```

## DrawerFooter Props

`DrawerFooter` is a wrapper around `ButtonSet` and accepts all `ButtonSet` props for consistent button layouts:

- `size`: `'default' | 'sm' | 'xs'` - Controls button sizing (defaults to `'default'`)
- `orientation`: `'responsive' | 'horizontal' | 'vertical'` - Controls layout behavior (defaults to `'vertical'`)
- `className`: Additional CSS classes
- All standard `div` HTML attributes

```tsx
<DrawerFooter size="sm" orientation="responsive">
  <Button>Save</Button>
  <DrawerClose asChild>
    <Button variant="ghost">Cancel</Button>
  </DrawerClose>
</DrawerFooter>
```

## Examples

### SnapPoints

Demonstrates snap points functionality, allowing the drawer to snap to specific heights when dragged. Users can also programmatically set the active snap point.

<Canvas of={DrawerStories.SnapPoints} sourceState="shown" />

### Inputs

Shows how the drawer handles form inputs with automatic keyboard repositioning. The drawer adjusts its position when the keyboard appears to keep inputs visible.

<Canvas of={DrawerStories.Inputs} sourceState="shown" />

### NonModal

A non-modal drawer that allows interaction with background content while the drawer is open. Useful for displaying supplementary information without blocking the main interface.

<Canvas of={DrawerStories.NonModal} sourceState="shown" />