import List from "../List";
import { ArgsTable, Canvas, Meta, Story } from "@storybook/addon-docs";
import Board from "../../Icon/Icons/components/Board";
import Team from "../../Icon/Icons/components/Team";
import ThumbsUp from "../../Icon/Icons/components/ThumbsUp";
import { useCallback } from "react";
import ListItem from "../../ListItem/ListItem";
import ListItemIcon from "../../ListItemIcon/ListItemIcon";
import ListTitle from "../../ListTitle/ListTitle";
import { Link, Tip } from "../../../storybook/components";
import { MENU, TABS, WIZARD } from "../../../storybook/components/related-components/component-description-map";
import Add from "../../Icon/Icons/components/Add";
import Filter from "../../Icon/Icons/components/Filter";
import classes from "./List.stories.module.scss";
import Divider from "../../Divider/Divider";
import Avatar from "../../Avatar/Avatar";
import { Icon } from "../../index";
import DropdownChevronDown from "../../Icon/Icons/components/DropdownChevronDown";
import DialogContentContainer from "../../DialogContentContainer/DialogContentContainer";
import { StoryDescription } from "../../../storybook/components/story-description/story-description";
import { createStoryMetaSettings } from "../../../storybook";
import { Flex } from "../../";

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

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

<!--- Component template -->

export const listTemplate = args => {
  const onClick = useCallback(() => alert("On click!"), []);
  return (
    <List {...args}>
      <ListItem onClick={onClick}>Board Power up</ListItem>
      <ListItem oonClick={onClick}>Team Power up</ListItem>
      <ListItem onClick={onClick}>Essentials</ListItem>
    </List>
  );
};

<!--- Component documentation -->

# List

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

Lists is a group of actionable items containing primary and supplemental actions, which are represented by icons and text.

<Canvas>
  <Story name="Overview" args={{}}>
    {listTemplate.bind({})}
  </Story>
</Canvas>

## Props

<ArgsTable story="Overview" />

## Usage

<UsageGuidelines
  guidelines={[
    "Use list component for display a list of navigable items in a column.",
    "List purpose is usually allowing navigation in context to the navigable  content.",
    "Your list items can be either in regular, selected or disabled state. You can control a list item's component state by its attributes."
  ]}
/>

<Tip title="Check yourself">
  For implementing a menu inside a dialog, please use our
  <Link href="/?path=/docs/navigation-menu--overview" size={Link.sizes.SMALL}>
    Menu
  </Link>
  component
</Tip>

## Variants

### List with categories

<Canvas>
  <Story name="List with categories">
    <List>
      <ListTitle>First category</ListTitle>
      <ListItem>List item 1</ListItem>
      <ListItem>List item 2</ListItem>
      <ListTitle>Second category</ListTitle>
      <ListItem>List item 3</ListItem>
      <ListItem>List item 4</ListItem>
    </List>
  </Story>
</Canvas>

### List with icons

<Canvas>
  <Story name="List with icons">
    <List>
      <ListItem id="list-1">
        <ListItemIcon icon={Board} />
        List item 1
      </ListItem>
      <ListItem id="list-2">
        <ListItemIcon icon={Team} />
        List item 2
      </ListItem>
      <ListItem id="list-3">
        <ListItemIcon icon={ThumbsUp} />
        List item 3
      </ListItem>
    </List>
  </Story>
</Canvas>

### List with virtualization optimization

When you display a large number of items, you may want to render only the options shown at a given moment to allow better performance and a
better user experience.

<Canvas>
  <Story name="List with virtualization optimization">
    <Flex align={Flex.align.START} gap={Flex.gaps.LARGE} style={{ width: "100%" }} direction={Flex.directions.COLUMN}>
      <StoryDescription description="Regular">
        <DialogContentContainer style={{ height: "162px", width: "200px" }}>
          <List renderOnlyVisibleItems style={{ height: "100%", width: "100%" }}>
            <ListItem>List item 1</ListItem>
            <ListItem>List item 2</ListItem>
            <ListItem>List item 3</ListItem>
            <ListItem>List item 4</ListItem>
            <ListItem>List item 5</ListItem>
            <ListItem>List item 6</ListItem>
            <ListItem>List item 7</ListItem>
            <ListItem>List item 8</ListItem>
            <ListItem>List item 9</ListItem>
            <ListItem>List item 10</ListItem>
            <ListItem>List item 11</ListItem>
            <ListItem>List item 12</ListItem>
          </List>
        </DialogContentContainer>
      </StoryDescription>
      <StoryDescription description="With categories">
        <DialogContentContainer style={{ height: "159px", width: "200px" }}>
          <List renderOnlyVisibleItems style={{ height: "100%", width: "100%" }}>
            <ListTitle>First category</ListTitle>
            <ListItem>List item 1</ListItem>
            <ListItem>List item 2</ListItem>
            <ListTitle>Second category</ListTitle>
            <ListItem>List item 3</ListItem>
            <ListItem>List item 4</ListItem>
            <ListItem>List item 5</ListItem>
            <ListItem>List item 6</ListItem>
            <ListItem>List item 7</ListItem>
            <ListItem>List item 8</ListItem>
            <ListItem>List item 9</ListItem>
            <ListItem>List item 10</ListItem>
            <ListItem>List item 11</ListItem>
            <ListItem>List item 12</ListItem>
          </List>
        </DialogContentContainer>
      </StoryDescription>
    </Flex>
  </Story>
</Canvas>

<Tip>
  While using virtualization optimization on your list component, please be aware your list needs to contain a constant
  height and width for function properly
</Tip>

## Do’s and Don’ts

<ComponentRules
  rules={[
    {
      positive: {
        component: (
          <div className={classes["leftpane-workspaces-section"]}>
            <List>
              <ListItem>
                <ListItemIcon icon={Add} />
                Add
              </ListItem>
              <ListItem>
                <ListItemIcon icon={Filter} />
                Filter
              </ListItem>
            </List>
            <Divider />
            <List>
              <ListItem>
                <ListItemIcon icon={Board} />
                Board name
              </ListItem>
              <ListItem>
                <ListItemIcon icon={Board} />
                Board name
              </ListItem>
            </List>
          </div>
        ),
        description: "Use a list component to create a menu displayed on one of the various sections of your web page."
      },
      negative: {
        component: (
          <DialogContentContainer>
            <List>
              <ListItem>
                <ListItemIcon icon={Add} />
                Add
              </ListItem>
              <ListItem>
                <ListItemIcon icon={Filter} />
                Filter
              </ListItem>
            </List>
            <Divider />
            <List>
              <ListItem>
                <ListItemIcon icon={Board} />
                Board name
              </ListItem>
              <ListItem>
                <ListItemIcon icon={Board} />
                Board name
              </ListItem>
            </List>
          </DialogContentContainer>
        ),
        description: (
          <>
            Do not use the list to implement a menu displayed inside a dialog. See{" "}
            <Link href="/?path=/docs/navigation-menu--overview" withoutSpacing>
              Menu
            </Link>
            .
          </>
        )
      }
    }
  ]}
/>

## Use cases and examples

### List as leftpane

<Canvas>
  <Story name="List as leftpane">
    <div className={classes["leftpane-workspaces-section"]}>
      <span className={classes["leftpane-workspaces-title"]}>Workspace</span>
      <span className={classes["leftpane-workspaces-options"]}>
        <div className={classes["leftpane-workspaces-description"]}>
          <Avatar size={Avatar.sizes.SMALL} text="W" backgroundColor={Avatar.colors.INDIGO} isSquare />
          Workspace name
        </div>
        <Icon className={classes["leftpane-workspaces-options-icon"]} icon={DropdownChevronDown} />
      </span>
      <List>
        <ListItem>
          <ListItemIcon icon={Add} />
          Add
        </ListItem>
        <ListItem>
          <ListItemIcon icon={Filter} />
          Filter
        </ListItem>
      </List>
      <Divider />
      <List>
        <ListItem>
          <ListItemIcon icon={Board} />
          Board name
        </ListItem>
        <ListItem>
          <ListItemIcon icon={Board} />
          Board name
        </ListItem>
        <ListItem>
          <ListItemIcon icon={Board} />
          Board name
        </ListItem>
      </List>
    </div>
  </Story>
</Canvas>

## Related components

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