import { ArgsTable, Canvas, Meta, Story } from "@storybook/addon-docs";
import BreadcrumbsBar from "../BreadcrumbsBar";
import BreadcrumbItem from "../BreadcrumbItem/BreadcrumbItem.tsx";
import Avatar from "../../Avatar/Avatar";
import DialogContentContainer from "../../DialogContentContainer/DialogContentContainer";
import { Board, Folder, Group, Workspace } from "../../Icon/Icons";
import person3 from "./assets/person3.png";
import { Link } from "../../../storybook/components";
import { BUTTON_GROUP, TABS, WIZARD } from "../../../storybook/components/related-components/component-description-map";
import { createStoryMetaSettings } from "../../../storybook/functions/createStoryMetaSettings";
import "./breadcrumbsBar.stories.scss";

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

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

<!--- Component template -->

export const breadcrumbsBarTemplate = args => {
  return (
    <BreadcrumbsBar {...args}>
      {args.items && args.items.map(item => <BreadcrumbItem key={item.text} text={item.text} icon={item.icon} />)}
    </BreadcrumbsBar>
  );
};

<!--- Component documentation -->

# BreadcrumbsBar

- [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

Breadcrumbs allow users to keep track and maintain awareness of their location as they navigate through pages, folders, files, etc.

<Canvas>
  <Story
    name="Overview"
    args={{
      items: [
        { text: "Workspace", icon: Workspace },
        { text: "Folder", icon: Folder },
        { text: "Board", icon: Board },
        { text: "Group", icon: Group }
      ]
    }}
  >
    {breadcrumbsBarTemplate.bind({})}
  </Story>
</Canvas>

## Props

<ArgsTable story="Overview" />

## Usage

<UsageGuidelines
  guidelines={[
    "Breadcrumbs show users their current location relative to the information architecture and enable them to quickly move up to a parent level or previous step",
    "Effective in a hierarchy of more than two levels.",
    "Start with the highest level parent page and move deeper into the information architecture as the breadcrumb trail progresses.",
    "Use breadcrumbs when the user is most likely to have landed on the page from an external source.",
    "Place breadcrumbs at the top left corner of the screen, above the page title."
  ]}
/>

<Tip title="Check yourself">
  If you are taking users through a multistep process, use the{" "}
  <Link href="/?path=/docs/navigation-wizard--overview" size={Link.sizes.SMALL} withoutSpacing>
    Wizard
  </Link>{" "}
  component instead.
</Tip>

## Variants

### Text only

<Canvas>
  <Story name="Text only">
    <BreadcrumbsBar type={BreadcrumbsBar.types.INDICATION}>
      <BreadcrumbItem text="Workspace" isCurrent />
      <BreadcrumbItem text="Folder" />
      <BreadcrumbItem text="Board" />
      <BreadcrumbItem text="Group" />
    </BreadcrumbsBar>
  </Story>
</Canvas>

### With icons

<Canvas>
  <Story name="With icons">
    <BreadcrumbsBar type={BreadcrumbsBar.types.NAVIGATION}>
      <BreadcrumbItem text="Workspace" icon={Workspace} isCurrent />
      <BreadcrumbItem text="Folder" icon={Folder} />
      <BreadcrumbItem text="Board" icon={Board} />
      <BreadcrumbItem text="Group" icon={Group} />
    </BreadcrumbsBar>
  </Story>
</Canvas>

## Do’s and Don’ts

<ComponentRules
  rules={[
    {
      positive: {
        component: (
          <BreadcrumbsBar type={BreadcrumbsBar.types.NAVIGATION}>
            <BreadcrumbItem text="Workspace" icon={Workspace} isCurrent />
            <BreadcrumbItem text="Folder" icon={Folder} />
            <BreadcrumbItem text="Board" icon={Board} />
            <BreadcrumbItem text="Group" icon={Group} />
          </BreadcrumbsBar>
        ),
        description: "If there’s a need to insert an icon, use for all items."
      },
      negative: {
        component: (
          <BreadcrumbsBar type={BreadcrumbsBar.types.NAVIGATION}>
            <BreadcrumbItem text="Workspace" icon={Workspace} isCurrent />
            <BreadcrumbItem text="Folder" />
            <BreadcrumbItem text="Board" />
            <BreadcrumbItem text="Group" />
          </BreadcrumbsBar>
        ),
        description: "Don’t use icons if not applied to all steps."
      }
    },
    {
      positive: {
        component: (
          <DialogContentContainer className="l3-storybook-breadcrumbs-bar_inline-wrapper">
            <Avatar size={Avatar.sizes.MEDIUM} src={person3} type={Avatar.types.IMG} />
            <div className="l3-storybook-breadcrumbs-bar_column-wrapper">
              <span className="l3-storybook-breadcrumbs-bar_title">Rotem Dekel</span>
              <BreadcrumbsBar type={BreadcrumbsBar.types.NAVIGATION}>
                <BreadcrumbItem text="User research" icon={Board} />
                <BreadcrumbItem text="Video sessions" icon={Group} />
              </BreadcrumbsBar>
            </div>
          </DialogContentContainer>
        ),
        description: "Use breadcrumbs when there is more than two levels of hierarchy."
      },
      negative: {
        component: (
          <DialogContentContainer className="l3-storybook-breadcrumbs-bar_inline-wrapper">
            <Avatar size={Avatar.sizes.MEDIUM} src={person3} type={Avatar.types.IMG} />
            <div className="l3-storybook-breadcrumbs-bar_column-wrapper">
              <span className="l3-storybook-breadcrumbs-bar_title">Rotem Dekel</span>
              <BreadcrumbsBar type={BreadcrumbsBar.types.NAVIGATION}>
                <BreadcrumbItem text="User research" icon={Board} />
              </BreadcrumbsBar>
            </div>
          </DialogContentContainer>
        ),
        description: "Don’t use breadcrumbs when there is only one level of navigation or hierachy."
      }
    }
  ]}
/>

## Use cases and examples

### Navigatable breadcrumbs

Use when breadcrumbs are clickable and are used for information and navigation

<Canvas>
  <Story name="Navigatable breadcrumbs">
    <div className="l3-storybook-breadcrumbs-bar_inline-wrapper">
      <Avatar size={Avatar.sizes.MEDIUM} src={person3} type={Avatar.types.IMG} />
      <div className="l3-storybook-breadcrumbs-bar_column-wrapper">
        <span className="l3-storybook-breadcrumbs-bar_title">Rotem Dekel</span>
        <BreadcrumbsBar type={BreadcrumbsBar.types.NAVIGATION}>
          <BreadcrumbItem text="User research" icon={Board} />
          <BreadcrumbItem text="Video sessions" icon={Group} />
        </BreadcrumbsBar>
      </div>
    </div>
  </Story>
</Canvas>

## Related components

<RelatedComponents componentsNames={[BUTTON_GROUP, WIZARD, TABS]} />
