import Tooltip from "../Tooltip";
import { capitalize } from "lodash-es";
import TooltipReference from "./TooltipReference";
import { ArgsTable, Story, Canvas, Meta } from "@storybook/addon-docs";
import { Hide, Subitems, Bolt } from "../../Icon/Icons";
import Icon from "../../Icon/Icon";
import Button from "../../Button/Button";
import { modifiers } from "./helper";
import { Link } from "../../../storybook/components";
import { TAG, LABEL, TIPSEEN } from "../../../storybook/components/related-components/component-description-map";
import { TooltipTheme } from "../TooltipConstants";
import "./tooltip.stories.scss";

<Meta title="Popover/Tooltip - (Coming Soon)" component={Tooltip} />

<!--- Component template -->

export const tooltipTemplate = args => {
  return (
    <div className="l3-storybook-tooltip_overview">
      <Tooltip
        // The modifier's purpose is to prevent the tipseen from being displayed when the user scrolls the story upwards / downwards.
        // Therefore, there is no need to move this prop in your implementations.
        modifiers={modifiers}
        {...args}
      >
        <div />
      </Tooltip>
    </div>
  );
};

<!--- Component documentation -->

# Tooltip

- [Overview](#overview)
- [Props](#props)
- [Usage](#usage)
- [Variants](#variants)
- [Themes](#themes)
- [Do’s and don’ts](#dos-and-donts)
- [Use cases and examples](#use-cases-and-examples)
- [Related components](#related-components)
- [Feedback](#feedback)

## Overview

Tooltips show contextual help or information about specific components when a user hovers on them.

<Canvas>
  <Story name="Overview" args={{ shouldShowOnMount: true, content: "I’m a tooltip" }}>
    {tooltipTemplate.bind({})}
  </Story>
</Canvas>

## Props

<ArgsTable story="Overview" />

## Usage

<UsageGuidelines
  guidelines={[
    "Should never contain critical information that a user would absolutely need to proceed.",
    "Use when the description content would be too much information to include inline or create too much clutter. For example, when expert users have seen it many times."
  ]}
/>

<Tip>
  As tooltips only surface from a hover, never include links or buttons in the copy. If your tooltip requires either of
  these, considers putting your content in a
  <Link href="/?path=/docs/popover-tipseen--overview" size={Link.sizes.SMALL} withoutSpacing>
    Tipseen
  </Link>
  or
  <Link href="/?path=/docs/feedback-attentionbox--overview" size={Link.sizes.SMALL}>
    Attention box.
  </Link>
</Tip>

## Variants

### Positions

Tooltip’s arrow can appear from top, bottom, left or right.

<Canvas>
  <Story name="Positions">
    <div className="l3-storybook-tooltip_top">
      <Tooltip
        // The modifier's purpose is to prevent the tipseen from being displayed when the user scrolls the story upwards / downwards.
        // Therefore, there is no need to move this prop in your implementations.
        modifiers={modifiers}
        content="BOTTOM"
        shouldShowOnMount
        position={Tooltip.positions.BOTTOM}
        animationType="expand"
        tooltipSize="large"
      >
        <div />
      </Tooltip>
    </div>
    <div className="l3-storybook-tooltip_bottom">
      <Tooltip
        // The modifier's purpose is to prevent the tipseen from being displayed when the user scrolls the story upwards / downwards.
        // Therefore, there is no need to move this prop in your implementations.
        modifiers={modifiers}
        content="TOP"
        shouldShowOnMount
        animationType="expand"
      >
        <div />
      </Tooltip>
    </div>
    <div className="l3-storybook-tooltip_right">
      <Tooltip
        // The modifier's purpose is to prevent the tipseen from being displayed when the user scrolls the story upwards / downwards.
        // Therefore, there is no need to move this prop in your implementations.
        modifiers={modifiers}
        content="Left"
        position={Tooltip.positions.RIGHT}
        shouldShowOnMount
        animationType="expand"
      >
        <div />
      </Tooltip>
    </div>
    <div className="l3-storybook-tooltip_left">
      <Tooltip
        // The modifier's purpose is to prevent the tipseen from being displayed when the user scrolls the story upwards / downwards.
        // Therefore, there is no need to move this prop in your implementations.
        modifiers={modifiers}
        content="Right"
        position={Tooltip.positions.LEFT}
        shouldShowOnMount
        animationType="expand"
      >
        <div />
      </Tooltip>
    </div>
  </Story>
</Canvas>

### Themes

Tooltip’s arrow can have various themes.

<Canvas>
  <Story name="Themes">
    {Object.values(TooltipTheme).map(theme => (
      <div className="l3-storybook-tooltip_top" key={theme}>
        <Tooltip
          modifiers={modifiers}
          content={capitalize(theme)}
          shouldShowOnMount
          position={Tooltip.positions.BOTTOM}
          animationType="expand"
          theme={theme}
        >
          <div />
        </Tooltip>
      </div>
    ))}
  </Story>
</Canvas>

## Do’s and Don’ts

<ComponentRules
  rules={[
    {
      positive: {
        component: (
          <Tooltip shouldShowOnMount content="Open quick search  + B">
            <div className="l3-storybook-tooltip_icon-box">
              <Icon icon={Bolt} iconSize="32" />
            </div>
          </Tooltip>
        ),
        description: "Use tooltips for adding alternative textual purpose for buttons which do not include any text."
      },
      negative: {
        component: (
          <Tooltip shouldShowOnMount content="Open quick search  + B">
            <Button>Quick search</Button>
          </Tooltip>
        ),
        description: "Don't use a tooltip to display information already written on the button text."
      }
    }
  ]}
/>

## Use cases and examples

### Icon tooltip

An icon tooltip is used to clarify the action or name of an interactive icon button. Provide tooltips for all unlabelled icons.

<Canvas>
  <Story name="Icon tooltip">
    <div className="l3-storybook-tooltip_box">
      <Tooltip content="Hidden columns">
        <div className="l3-storybook-tooltip_icon-wrapper">
          <Icon icon={Hide} />
        </div>
      </Tooltip>
    </div>
  </Story>
</Canvas>

### Definition tooltip

The definition tooltip provides additional help or defines an item or term. It may be used on the label of a UI element, or on a word embedded in a paragraph.

<Canvas>
  <Story name="Definition tooltip">
    <div className="l3-storybook-tooltip_box">
      <Tooltip content="Item name: Bottom sheets">
        <div className="l3-storybook-tooltip_icon-wrapper">
          <Icon icon={Subitems} />
          <span>Subitem</span>
        </div>
      </Tooltip>
    </div>
  </Story>
</Canvas>

### Immediate tooltips

Immediately show when another is shown. The two left tooltips uses the immediate show prop, the right one ignores it and should always have show delay.

<Canvas>
  <Story name="Immediate tooltips">
    <div className="l3-storybook-tooltip_box">
      <Tooltip immediateShowDelay={0} content="I'm a tooltip">
        <TooltipReference />
      </Tooltip>
      <Tooltip immediateShowDelay={0} content="I'm a tooltip">
        <TooltipReference />
      </Tooltip>
      <Tooltip content="I'm a tooltip">
        <TooltipReference />
      </Tooltip>
    </div>
  </Story>
</Canvas>

## Related components

<RelatedComponents componentsNames={[TAG, LABEL, TIPSEEN]} />
