import { ArgsTable, Canvas, Meta, Story } from "@storybook/addon-docs";
import { createStoryMetaSettings } from "../../../../storybook/functions/createStoryMetaSettings";
import {
  menuItemIconsTemplate,
  menuItemIconsWithColorsTemplate,
  menuItemOverflowTemplate,
  menuItemStatesTemplate,
  menuItemTemplate,
  menuItemTooltipTemplate
} from "./MenuItem.stories";
import MenuItem from "../MenuItem";

export const metaSettings = createStoryMetaSettings({
  component: MenuItem,
  enumPropNamesArray: ["tooltipPosition"],
  iconPropNamesArray: ["icon"]
});

<Meta
  title="Navigation/Menu - (Coming Soon)/MenuItem - (Coming Soon)"
  component={MenuItem}
  argTypes={metaSettings.argTypes}
  decorators={metaSettings.decorators}
/>

<!--- Component documentation -->

# Menu Item

- [Overview](#overview)
- [Props](#props)
- [Use cases and examples](#use-cases-and-examples)
- [Related components](#related-components)
- [Feedback](#feedback)

## Overview

Use menu item for drawing one options that displayed inside a menu.

<Canvas>
  <Story name="Overview" args={{ title: "Menu item" }}>
    {menuItemTemplate.bind({})}
  </Story>
</Canvas>

## Props

<ArgsTable of={MenuItem} />

## Variants

### States

<Canvas>
  <Story name="States">{menuItemStatesTemplate.bind({})}</Story>
</Canvas>

### Icons

<Canvas>
  <Story name="Icons">{menuItemIconsTemplate.bind({})}</Story>
</Canvas>

### Icons with colors

<Canvas>
  <Story name="Icons with colors">{menuItemIconsWithColorsTemplate.bind({})}</Story>
</Canvas>

### Overflow

<Canvas>
  <Story name="Overflow">{menuItemOverflowTemplate.bind({})}</Story>
</Canvas>

### Tooltips

<Canvas>
  <Story name="Tooltip">{menuItemTooltipTemplate.bind({})}</Story>
</Canvas>
