import { forwardRef } from "react";
import { Meta, ArgTypes, Canvas } from "@storybook/addon-docs/blocks";
import { DropdownMenu } from ".";
import { Icon } from "../Icon";
import * as DropdownMenuStories from "./DropdownMenu.stories";

<Meta of={DropdownMenuStories} />

# DropdownMenu

The `DropdownMenu` component is used for displaying contextual information in a
conditionally opened overlay.

## Install

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

## Usage

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

## Examples

### Basic DropdownMenu

DropdownMenu consists of menu items. Each item should be wrapped with
`DropdownMenu.Item` component. This ensures that appropriate CSS class names and
behaviours are handled correctly.

### Default

<Canvas of={DropdownMenuStories.Default} />

### With Customisations

A custom trigger may be provided as a React component:

`<DropdownMenu trigger={<CustomTrigger />} />`

The trigger will receive:

- `className` - contains styles; apply on the trigger component
- `open` - informs about the open state (`true`/`false`) of the menu
- `label` - contains label text
- `...otherProps` - contains accessibility props; apply on the trigger component

The trigger will need to be wrapped with `forwardRef` as per the example below:

```jsx
import { Ref, forwardRef } from "react";
import { Icon } from '@simplybusiness/mobius';
import { chevronDown, chevronUp } from '@simplybusiness/icons';

interface CustomTriggerProps {
  open: boolean,
  label: string
}

const CustomTrigger = forwardRef((props: CustomTriggerProps, ref: Ref<HTMLButtonElement>) => {
  const { open, label, ...otherProps } = props;

  return (
    <button ref={ref} {...otherProps}>
      {label}
      {' '}
      <Icon icon={open ? chevronUp : chevronDown} />
    </button>
  );
});
```

If you would like to use a an `onClick` handler on each of the DropdownMenu items,
you may write it as follows:

```jsx
<DropdownMenu>
  <DropdownMenu.Item onClick={() => alert("Clicked Home")}>
    Home
  </DropdownMenu.Item>
</DropdownMenu>
```

export const CustomTrigger = forwardRef((props, ref) => {
  const { open, ...otherProps } = props;
  return (
    <button ref={ref} {...otherProps}>
      {open ? "Close" : "Open"}{" "}
      <Icon
        name="chevronDown"
        style={{
          transform: open ? "rotate(180deg)" : "rotate(0deg)",
          transition: "transform 150ms ease-in-out 0s",
        }}
      />
    </button>
  );
});

<Canvas of={DropdownMenuStories.WithCustomTrigger} />

## Props

<ArgTypes of={DropdownMenu} />

## Component HTML Structure and Class names

The following HTML is rendered for a DropdownMenu:

```html
<nav class="mobius-dropdown-menu">
  <button
    class="mobius-dropdown-menu__trigger {className}"
    aria-expanded="{open}"
    {...otherProps}
  >
    {label}
  </button>
  <ul class="mobius-dropdown-menu__list">
    <li class="mobius-dropdown-menu__item">{child}</li>

    (more li items...)
  </ul>
</nav>
```
