import Icon from "../Icon";
import Bolt from "../Icons/components/Bolt";
import { ArgsTable, Canvas, Meta, Story } from "@storybook/addon-docs";
import { createComponentTemplate, createStoryMetaSettings } from "../../../storybook";
import { IconsList } from "./icon.stories.helperComponents";
import "./Icon.stories.scss";

export const metaSettings = createStoryMetaSettings({
  component: Icon,
  enumPropNamesArray: [{ enumName: "type", propName: "iconType" }],
  iconPropNamesArray: ["icon"]
});

<Meta title="Media/Icon" component={Icon} argTypes={metaSettings.argTypes} decorators={metaSettings.decorators} />

<!--- Component template -->

export const iconTemplate = createComponentTemplate(Icon);

<!--- Component documentation -->

# Icon

- [Overview](#overview)
- [Props](#props)
- [Usage](#usage)
- [Variants](#variants)
- [States](#states)
- [Icons list](#icons-list)
- [Feedback](#feedback)

## Overview

Icon component is our component to unify the supported icon types (Vibe Icons, FontIcon and Custom SVG Icons)

<Canvas>
  <Story name="Overview" args={{ icon: Bolt }}>
    {iconTemplate.bind({})}
  </Story>
</Canvas>

## Props

<ArgsTable story="Overview" />

## Usage

<UsageGuidelines
  guidelines={[
    "Always wrap icons with Icon component",
    "Try to always use icon alongside text or provide tooltip to accommodate the icon"
  ]}
/>

## Variants

### Vibe Icon

<Canvas>
  <Story name="Vibe Icon">
    <Icon iconType={Icon.type.SVG} icon={Bolt} iconLabel="my bolt svg icon" iconSize={16} />
  </Story>
</Canvas>

### FontIcon

<Canvas>
  <Story name="Font Icon">
    <Icon iconType={Icon.type.ICON_FONT} iconLabel="my font awesome start icon" icon="fa fa-star" />
  </Story>
</Canvas>

### Custom SVG

<Canvas>
  <Story name="Custom SVG">
    <Icon
      iconType={Icon.type.SRC}
      icon="https://cdn.l3vels.xyz/images/apps/custom-icons/Form.svg"
      iconLabel="my src awesome icon"
      className="icon-story-custom-icon"
      useCurrentColor
    />
  </Story>
</Canvas>

## States

### Color

As a default the icon will inherit the color of it's parent container

<Canvas>
  <Story name="Color">
    <div style={{ color: "var(--color-lipstick)" }}>
      <Icon iconType={Icon.type.SVG} icon={Bolt} iconLabel="my bolt svg icon" iconSize={16} />
    </div>
  </Story>
</Canvas>

## Icons List

Icons are exported by name from `@l3-lib/ui-core/icons`:

```javascript
import { DoubleCheck } from "@l3-lib/ui-core/icons";
```

<Canvas>
  <Story name="Icons List" args={{}}>
    {IconsList.bind({})}
  </Story>
</Canvas>
