import Menu from "../Menu";
import { ArgsTable, Story, Canvas, Meta } from "@storybook/addon-docs";
import {
  menuTemplate,
  menuWithSubMenuTemplate,
  menuWith2DepthSubMenuTemplate,
  menuWithIconsTemplate,
  ComponentRuleSimpleActions,
  ComponentRuleWithSearch,
  ComponentRuleDefaultWidth,
  ComponentRuleLargeWidth,
  menuSizesTemplate,
  menuWithGridItems
} from "./menu.stories";
import {
  COMBOBOX,
  DROPDOWN,
  SPLIT_BUTTON
} from "../../../../storybook/components/related-components/component-description-map";
import classes from "./Menu.stories.module.scss";
import { menuWithTwoDepthsSuite } from "../__tests__/menu-interactions";

<Meta title="Navigation/Menu - (Coming Soon)/Menu - (Coming Soon)" component={Menu} />

<!--- Component documentation -->

# Menu

- [Overview](#overview)
- [Props](#props)
- [Usage](#usage)
- [Variants](#variants)
- [Do’s and don’ts](#dos-and-donts)
- [Use cases and examples](#use-cases-and-examples)
- [Related components](#related-components)
- [Feedback](#feedback)

## Overview

A menu is a navigatable contextual list of items that can be selected.

<Canvas>
  <Story name="Overview" args={{}}>
    {menuTemplate.bind({})}
  </Story>
</Canvas>

## Props

<ArgsTable of={Menu} />

## Usage

<UsageGuidelines
  guidelines={[
    "A menu offers a list of actions or functions that a user can access.",
    "Menu height is dynamic according to the content it contains and its location on the screen.",
    "Closing menus can be done by selecting a value or clicking any where outside the menu.",
    "Menu items can include icons, radio buttons, and checkboxes.",
    "If a menu dropdown contains a mix of links and buttons, separate them with a content divider with links at the top and buttons at the bottom.",
    "Menu should contains at least two menu items."
  ]}
/>

<Tip>Need to place a search field to filter results? Use the Combobox component instead</Tip>

## Variants

### Sizes

<Canvas>
  <Story name="Sizes" args={{ size: Menu.sizes.SMALL }}>
    {menuSizesTemplate.bind({})}
  </Story>
</Canvas>

### Menu with icons

<Canvas>
  <Story name="Menu with icons">{menuWithIconsTemplate.bind({})}</Story>
</Canvas>

## Do’s and Don’ts

<ComponentRules
  rules={[
    {
      positive: {
        component: <ComponentRuleSimpleActions />,
        description: "Use menus for simple actions."
      },
      negative: {
        component: <ComponentRuleWithSearch />,
        description: "Don’t place a search component near to menu for implement a filter capability. See Combobox."
      }
    },
    {
      positive: {
        component: <ComponentRuleDefaultWidth />,
        description: "Keep to the default menu width."
      },
      negative: {
        component: <ComponentRuleLargeWidth />,
        description: "Don’t change the width of the menu, only change the height."
      }
    }
  ]}
/>

## Use cases and examples

### Menu with sub menu

<Canvas>
  <Story name="Menu with sub menu">{menuWithSubMenuTemplate.bind({})}</Story>
</Canvas>

### Menu with 2-depth sub menu

<Canvas>
  <Story name="Menu with 2-depth sub menu" play={menuWithTwoDepthsSuite}>
    {menuWith2DepthSubMenuTemplate.bind({})}
  </Story>
</Canvas>

### Menu with grid items and sub menu

Grid menu items are navigable with a keyboard as well

<Canvas>
  <Story name="Menu with grid items and sub menu">{menuWithGridItems.bind({})}</Story>
</Canvas>

## Related components

<RelatedComponents componentsNames={[COMBOBOX, DROPDOWN, SPLIT_BUTTON]} />
