import ListItem from "../ListItem";
import { ArgsTable, Canvas, Meta, Story } from "@storybook/addon-docs";
import { createComponentTemplate, createStoryMetaSettings } from "../../../storybook";
import Send from "../../Icon/Icons/components/Send";
import ListItemIcon from "../../ListItemIcon/ListItemIcon";

export const metaSettings = createStoryMetaSettings({
  component: ListItem,
  enumPropNamesArray: ["size"]
});

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

<!--- Component template -->

export const listItemTemplate = createComponentTemplate(ListItem);

<!--- Component documentation -->

# ListItem

- [Overview](#overview)
- [Props](#props)
- [Usage](#usage)
- [Variants](#variants)
- [Feedback](#feedback)

## Overview

An item of a List component

<Canvas>
  <Story name="Overview" args={{ children: "List item" }}>
    {listItemTemplate.bind({})}
  </Story>
</Canvas>

## Props

<ArgsTable story="Overview" />

## Usage

<UsageGuidelines
  guidelines={[
    "List item can include an ListItemIcon or text.",
    "List item icon should always be displayed before the item's text (left or right depending on the item's text language)"
  ]}
/>

## Variants

### States

<Canvas>
  <Story name="States">
    <ListItem>Default state</ListItem>
    <ListItem disabled>Disabled state</ListItem>
    <ListItem selected>Selected state</ListItem>
  </Story>
</Canvas>

### Sizes

<Canvas>
  <Story name="Sizes">
    <ListItem size={ListItem.sizes.SMALL}>Small item</ListItem>
    <ListItem size={ListItem.sizes.MEDIUM}>Medium item</ListItem>
    <ListItem size={ListItem.sizes.LARGE}>Large item</ListItem>
  </Story>
</Canvas>

### List item with an icon

<Canvas>
  <Story name="List item with an icon">
    <ListItem>
      <ListItemIcon icon={Send} />
      Productivity
    </ListItem>
  </Story>
</Canvas>
