import { Meta, ArgTypes, Canvas } from "@storybook/addon-docs/blocks";
import { AccordionList } from "..";
import * as AccordionListStories from "./AccordionList.stories";

<Meta of={AccordionListStories} />

# AccordionList

AccordionList is a wrapper component that manages multiple Accordion items. It handles the state and coordination of multiple accordions, ensuring only one is open at a time (unless `allowMultiple` is enabled). This component is ideal for FAQ sections, expandable content lists, and grouped information displays.

## Install

```bash
yarn add @simplybusiness/mobius
```

## Usage

```js
import { AccordionList } from "@simplybusiness/mobius";
```

## Examples

### Default

By default, only one accordion can be open at a time. Opening a new accordion automatically closes the previously opened one.

<Canvas of={AccordionListStories.Default} />

{/* prettier-ignore */}
```jsx
import { AccordionList } from "@simplybusiness/mobius";

const content = [
  {
    id: "coverage",
    header: "What is covered?",
    details: "Your policy covers damage to your business property...",
  },
  {
    id: "claims",
    header: "How do I make a claim?",
    details: "To make a claim, contact us immediately...",
  },
  {
    id: "adjust-coverage",
    header: "Can I adjust my coverage?",
    details: "Yes, you can adjust your coverage at any time...",
  },
];

<AccordionList content={content} />
```

### With Callbacks

Use `onOpen` and `onClose` callbacks to track accordion interactions.

<Canvas of={AccordionListStories.WithCallbacks} />

{/* prettier-ignore */}
```jsx
import { AccordionList } from "@simplybusiness/mobius";

<AccordionList
  content={content}
  onOpen={(id) => console.log(`Opened: ${id}`)}
  onClose={(id) => console.log(`Closed: ${id}`)}
/>
```

### Two Items

Works well with just a couple of items.

<Canvas of={AccordionListStories.TwoItems} />

{/* prettier-ignore */}
```jsx
import { AccordionList } from "@simplybusiness/mobius";

const content = [
  {
    id: "business-liability",
    header: "Business Liability",
    details: "Protection against third-party claims...",
  },
  {
    id: "professional-indemnity",
    header: "Professional Indemnity",
    details: "Coverage for claims arising from professional advice...",
  },
];

<AccordionList content={content} />
```

### Many Items

Handles larger lists gracefully.

<Canvas of={AccordionListStories.ManyItems} />

{/* prettier-ignore */}
```jsx
import { AccordionList } from "@simplybusiness/mobius";

const content = [
  { id: "1", header: "Property Insurance", details: "..." },
  { id: "2", header: "Liability Insurance", details: "..." },
  { id: "3", header: "Business Interruption", details: "..." },
  { id: "4", header: "Professional Indemnity", details: "..." },
  { id: "5", header: "Cyber Insurance", details: "..." },
];

<AccordionList content={content} />
```

### With React Node Content

Both `header` and `details` can be React nodes for rich content.

<Canvas of={AccordionListStories.WithReactNodeContent} />

{/* prettier-ignore */}
```jsx
import { AccordionList } from "@simplybusiness/mobius";

const content = [
  {
    id: "important-info",
    header: <strong>Important Information</strong>,
    details: (
      <div>
        <p>This is a paragraph with <em>formatted</em> text.</p>
        <ul>
          <li>Point one</li>
          <li>Point two</li>
          <li>Point three</li>
        </ul>
      </div>
    ),
  },
  {
    id: "standard-text",
    header: "Standard Text Header",
    details: "Standard text details",
  },
];

<AccordionList content={content} />
```

### Allow Multiple Open

Set `allowMultiple` to `true` to allow multiple accordions to be open simultaneously.

<Canvas of={AccordionListStories.AllowMultiple} />

{/* prettier-ignore */}
```jsx
import { AccordionList } from "@simplybusiness/mobius";

<AccordionList content={content} allowMultiple={true} />
```

## Props

<ArgTypes of={AccordionList} />

## Component HTML Structure and Class names

The AccordionList renders a list of Accordion components:

```html
<div class="mobius-accordion-list">
  <div class="mobius-accordion --should-animate">
    <div class="mobius-accordion__content-container" aria-hidden="true">
      <div class="mobius-accordion__content">{details}</div>
    </div>
    <div
      class="mobius-accordion__link"
      role="button"
      tabindex="0"
      aria-expanded="false"
    >
      <span class="mobius-accordion__link-text">{header}</span>
      <svg class="mobius-accordion__link-icon">{icon}</svg>
    </div>
  </div>
  <!-- Additional accordion items -->
</div>
```

## Behavior

- **Single open (default)**: Opening an accordion automatically closes any previously opened accordion
- **Multiple open**: When `allowMultiple={true}`, multiple accordions can be open at the same time
- **Callbacks**: `onOpen` and `onClose` are triggered when accordions are opened or closed
- **Accessibility**: Each accordion maintains proper ARIA attributes for screen readers
