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

<Meta of={SidePanelStories} />

<Title>SidePanel</Title>
<Subtitle>
  A specialized version of the Sheet component, designed to slide in from the
  right with a prominent close button.
</Subtitle>
<SourceLinks
  links={[
    {
      label: 'View API in Radix UI',
      href: 'https://www.radix-ui.com/primitives/docs/components/dialog#api-reference',
    },
    {
      label: 'shadcn/ui',
      href: 'https://ui.shadcn.com/docs/components/sheet',
    },

]}
/>

<LifecycleTag variant="Stable" />

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

## Anatomy

The `SidePanel` is a specific implementation of the `Sheet` component. It uses `SidePanelContent` to provide a consistent layout that opens from the right and includes a prominent, custom close button outside the sheet's main content area. For long content, wrap it in a `SidePanelScrollArea` to enable vertical scrolling.

## Subcomponents

- `SidePanelContent`: The main content container for the SidePanel. It has `variant` props for `narrow` (default) and `wide`.
- `SidePanelHeader`: A header component that includes the close button and uses flexbox layout. Title goes on the left, close button on the right.
- `SidePanelTitle`: A title component that composes SheetTitle.
- `SidePanelScrollArea`: A component that enables vertical scrolling for long content within the SidePanel.
- `SidePanelFooter`: A footer component for actions at the bottom of the SidePanel.
- `SidePanelCloseMobile`: A close button component that is visible only on mobile devices. Can be used standalone or is automatically included in `SidePanelHeader`.

## Usage

### Import

```tsx
import {
  SidePanel,
  SidePanelTrigger,
  SidePanelContent,
  SidePanelHeader,
  SidePanelTitle,
  SidePanelScrollArea,
  SidePanelFooter,
} from '@chainlink/blocks'
```

### Example

```tsx
function MySidePanel() {
  return (
    <SidePanel>
      <SidePanelTrigger>Open SidePanel</SidePanelTrigger>
      <SidePanelContent>
        <SidePanelHeader>
          <SidePanelTitle>SidePanel Title</SidePanelTitle>
        </SidePanelHeader>
        <SidePanelScrollArea>
          <div className="p-6">Your scrollable content here.</div>
        </SidePanelScrollArea>
        <SidePanelFooter>
          <Button variant="secondary">Footer Action</Button>
        </SidePanelFooter>
      </SidePanelContent>
    </SidePanel>
  )
}
```

## Adding Additional Items

You can add multiple items in the header (title, buttons, nav, etc.). All children are placed in a flex container on the left, and the close button is automatically positioned on the right:

```tsx
<SidePanelHeader>
  <SidePanelTitle>Title</SidePanelTitle>
  <ButtonIcon size="sm">
    <SvgCog />
  </ButtonIcon>
  {/* Close button is automatically added on the far right */}
</SidePanelHeader>
```

On mobile, the header uses CSS Grid to keep the close button on the right. On desktop, it uses flexbox with the close button pushed to the far right. You can control the internal layout of your items using standard flexbox utilities (`ml-auto`, etc.) inside the content area.

## Examples

### With Footer

A standard SidePanel that includes a footer for actions.

<Canvas of={SidePanelStories.WithFooter} sourceState="shown" />

### Wide Variant

A wider version of the SidePanel, suitable for displaying more detailed information. Use `variant="wide"`.

<Canvas of={SidePanelStories.WideVariant} sourceState="shown" />{' '}

### With Additional Right Side Button

A SidePanel with an additional right side button.

<Canvas
  of={SidePanelStories.WithAdditionalRightSideButton}
  sourceState="shown"
/>

### With Stand Alone Mobile Close Button

A SidePanel with a standalone mobile close button. This pattern is useful when `SidePanelHeader` is not used, or when you have custom content that requires a different layout.

By default, `SidePanelCloseMobile` is absolutely positioned. If you want it to flow within your layout instead, add the `static` className.

<Canvas
  of={SidePanelStories.WithStandAloneMobileCloseButton}
  sourceState="shown"
/>