import { ArgsTable, Canvas, Meta, Story } from "@storybook/addon-docs";
import { createComponentTemplate, createStoryMetaSettings } from "../../../../storybook";
import BreadcrumbsBar from "../../BreadcrumbsBar";
import BreadcrumbItem from "../BreadcrumbItem";
import { Workspace } from "../../../Icon/Icons";
import "./breadcrumbItem.stories.scss";

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

<Meta
  title="Navigation/BreadcrumbsBar/BreadcrumbItem"
  component={BreadcrumbItem}
  argTypes={metaSettings.argTypes}
  decorators={metaSettings.decorators}
/>

<!--- Component template -->

export const breadcrumbItemTemplate = createComponentTemplate(BreadcrumbItem);

<!--- Component documentation -->

# BreadcrumbItem

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

## Overview

<Canvas>
  <Story name="Overview" args={{ text: "Workspace", icon: Workspace }}>
    {breadcrumbItemTemplate.bind({})}
  </Story>
</Canvas>

## Props

<ArgsTable story="Overview" />

## Variants

### States

<Canvas>
  <Story name="States">
    <div className="l3-storybook-breadcrumb-item_column-wrapper">
      <div className="l3-storybook-breadcrumb-item_row-wrapper">
        <span>Link</span>
        <BreadcrumbsBar type={BreadcrumbsBar.types.NAVIGATION}>
          <BreadcrumbItem text="Workspace" icon={Workspace} link="https://www.google.com" />
        </BreadcrumbsBar>
      </div>
      <div className="l3-storybook-breadcrumb-item_row-wrapper">
        <span>Function</span>
        <BreadcrumbsBar type={BreadcrumbsBar.types.NAVIGATION}>
          <BreadcrumbItem
            text="Workspace"
            icon={Workspace}
            onClick={() => {
              alert("Hello");
            }}
          />
        </BreadcrumbsBar>
      </div>
      <div className="l3-storybook-breadcrumb-item_row-wrapper">
        <span>Disabled</span>
        <BreadcrumbsBar>
          <BreadcrumbItem text="Workspace" icon={Workspace} disabled />
        </BreadcrumbsBar>
      </div>
      <div className="l3-storybook-breadcrumb-item_row-wrapper">
        <span>Current</span>
        <BreadcrumbsBar>
          <BreadcrumbItem text="Workspace" icon={Workspace} isCurrent />
        </BreadcrumbsBar>
      </div>
    </div>
  </Story>
</Canvas>

### With icon

<Canvas>
  <Story name="With icon">
    <div className="l3-storybook-breadcrumb-item_column-wrapper">
      <div className="l3-storybook-breadcrumb-item_row-wrapper">
        <span>With Icon</span>
        <BreadcrumbsBar>
          <BreadcrumbItem text="Workspace" icon={Workspace} />
        </BreadcrumbsBar>
      </div>
      <div className="l3-storybook-breadcrumb-item_row-wrapper">
        <span>Without Icon</span>
        <BreadcrumbsBar>
          <BreadcrumbItem text="Workspace" />
        </BreadcrumbsBar>
      </div>
    </div>
  </Story>
</Canvas>
