import Tab from "../Tab/Tab";
import TabList from "../TabList/TabList";
import TabPanel from "../TabPanel/TabPanel";
import TabPanels from "../TabPanels/TabPanels";
import TabsContext from "../TabsContext/TabsContext";
import { ArgsTable, Canvas, Meta, Story } from "@storybook/addon-docs";
import { Calendar, Chart, Gantt, NavigationChevronDown, NewTab, Table } from "../../Icon/Icons";
import DialogContentContainer from "../../DialogContentContainer/DialogContentContainer";
import TextField from "../../TextField/TextField";
import { Link, RelatedComponents, UsageGuidelines } from "../../../storybook/components";
import {
  BREADCRUBMS,
  BUTTON_GROUP,
  STEPPER
} from "../../../storybook/components/related-components/component-description-map";
import { tabsTemplate } from "./tabs.overview.jsx";
import "./tabs.stories.scss";

<Meta title="Navigation/Tabs - (in progress)/Tabs - (in progress)" component={Tab} />

# Tabs

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

Tabs allow users to navigate between related views of content while remaining in the context of the page.

<Canvas>
  <Story name="Overview" args={{ className: "l3-storybook-tabs_bg-color" }}>
    {tabsTemplate.bind({})}
  </Story>
</Canvas>

## Props

<ArgsTable story="Overview" />

## Usage

<UsageGuidelines
  guidelines={[
    "Tabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.",
    "Align navigation tabs and content tabs left (in left-to-right languages) and never center within a page or content area.",
    "The first tab is selected by default. The default tab is most important use case of the page.",
    "Stick to only one row of tabs."
  ]}
/>

<Tip>
  Use tabs to navigate between deferent contents, if switching between states within the same content use{" "}
  <Link href="/?path=/docs/buttons-buttongroup--overview" size={Link.sizes.SMALL} withoutSpacing>
    Button group
  </Link>{" "}
  instead
</Tip>

## Variants

### Default - compact tabs

<Canvas>
  <Story name="Default">
    <TabsContext className="l3-storybook-tabs_bg-color">
      <TabList>
        <Tab>First</Tab>
        <Tab>Second</Tab>
        <Tab>Third</Tab>
        <Tab disabled>Disabled</Tab>
      </TabList>
      <TabPanels>
        <TabPanel>First slide</TabPanel>
        <TabPanel>Second slide</TabPanel>
        <TabPanel>Third slide</TabPanel>
        <TabPanel>Fourth slide</TabPanel>
      </TabPanels>
    </TabsContext>
  </Story>
</Canvas>

### Stretched

The width of the list is responsive to the screen's width.

<Canvas>
  <Story name="Stretched">
    <div style={{ width: "100%" }}>
      <TabList tabType="stretched">
        <Tab>First</Tab>
        <Tab>Second</Tab>
        <Tab>Third</Tab>
        <Tab disabled>Disabled</Tab>
      </TabList>
    </div>
  </Story>
</Canvas>

### Motion

Tabs animation direction

<Canvas>
  <Story name="Motion">
    <div className="l3-storybook-tabs_column-wrapper">
      <TabsContext className="l3-storybook-tabs_bg-color">
        <TabList>
          <Tab>First</Tab>
          <Tab>Second</Tab>
          <Tab>Third</Tab>
          <Tab disabled>Disabled</Tab>
        </TabList>
        <TabPanels animationDirection="ltr">
          <TabPanel>First slide</TabPanel>
          <TabPanel>Second slide</TabPanel>
          <TabPanel>Third slide</TabPanel>
          <TabPanel>Fourth slide</TabPanel>
        </TabPanels>
      </TabsContext>
      <TabsContext className="l3-storybook-tabs_bg-color">
        <TabList>
          <Tab>First</Tab>
          <Tab>Second</Tab>
          <Tab>Third</Tab>
          <Tab disabled>Disabled</Tab>
        </TabList>
        <TabPanels>
          <TabPanel>First slide</TabPanel>
          <TabPanel>Second slide</TabPanel>
          <TabPanel>Third slide</TabPanel>
          <TabPanel>Fourth slide</TabPanel>
        </TabPanels>
      </TabsContext>
    </div>
  </Story>
</Canvas>

## Do’s and Don’ts

<ComponentRules
  rules={[
    {
      positive: {
        component: (
          <DialogContentContainer className="l3-storybook-tabs_spacing">
            <TabList>
              <Tab icon={Table}>Main Table</Tab>
              <Tab icon={Chart}>Chart</Tab>
              <Tab icon={Calendar}>Calendar</Tab>
            </TabList>
          </DialogContentContainer>
        ),
        description: "Use either all text labels, all icon labels, or both, across all labels."
      },
      negative: {
        component: (
          <DialogContentContainer className="l3-storybook-tabs_spacing">
            <TabList>
              <Tab>Main Table</Tab>
              <Tab icon={Gantt}> </Tab>
            </TabList>
          </DialogContentContainer>
        ),
        description: "Don’t mix tabs that contain only text, with tabs that contain only icons. "
      }
    },
    {
      positive: {
        component: (
          <DialogContentContainer className="l3-storybook-tabs_spacing">
            <TabList>
              <Tab icon={NewTab}>Main Table</Tab>
              <Tab icon={Table}>Table</Tab>
              <Tab icon={NavigationChevronDown} iconSide="right">
                More
              </Tab>
            </TabList>
          </DialogContentContainer>
        ),
        description: "When there are too many tabs to fit horizontally across the viewport, use a “More” dropdown."
      },
      negative: {
        component: (
          <DialogContentContainer className="l3-storybook-tabs_spacing">
            <TabList>
              <Tab>Main...</Tab>
              <Tab>Table</Tab>
              <Tab>Time...</Tab>
              <Tab>Fir...</Tab>
            </TabList>
          </DialogContentContainer>
        ),
        description: "Do not cut the tabs name just to make them fit horizontally."
      }
    }
  ]}
/>

## Use cases and examples

### Board views tabs

The tabs are presenting the same content, in a different view.

<Canvas>
  <Story name="Board views tabs">
    <TabList>
      <Tab icon={Table}>Main Table</Tab>
      <Tab icon={Chart}>Chart</Tab>
      <Tab icon={Calendar}>Calendar</Tab>
    </TabList>
  </Story>
</Canvas>

### Admin section tabs

In the admin section tabs used to navigate between the different preferences

<Canvas>
  <Story name="Admin section tabs">
    <TabsContext className="l3-storybook-tabs_wrapper">
      <TabList>
        <Tab>Profile</Tab>
        <Tab>Account</Tab>
      </TabList>
      <TabPanels>
        <TabPanel>
          <h2>Login Details</h2>
          <TextField title="Profile Name" size={TextField.sizes.MEDIUM} placeholder="Profile Name" />
        </TabPanel>
        <TabPanel>
          <h2>Account Details</h2>
          <TextField title="Account Name" size={TextField.sizes.MEDIUM} placeholder="Account Name" />
        </TabPanel>
      </TabPanels>
    </TabsContext>
  </Story>
</Canvas>

## Related components

<RelatedComponents componentsNames={[BREADCRUBMS, BUTTON_GROUP, STEPPER]} />
