import { ArgsTable, Canvas, Meta, Story } from "@storybook/addon-docs";
import { useCallback, useEffect, useState } from "react";
import Counter from "../Counter";
import { createComponentTemplate, createStoryMetaSettings } from "../../../storybook";
import { TAG, LABEL, TOOLTIP } from "../../../storybook/components/related-components/component-description-map";
import Avatar from "../../Avatar/Avatar";
import { AddUpdate, Notifications, Update } from "../../Icon/Icons";
import Icon from "../../Icon/Icon";
import { Link } from "../../../storybook/components";
import "./counter.stories.scss";

export const metaSettings = createStoryMetaSettings({
  component: Counter,
  enumPropNamesArray: ["size", "color", "kind"]
});

<Meta
  title="Feedback/Counter - (Coming Soon)"
  component={Counter}
  argTypes={{
    ...metaSettings.argTypes,
    wrapperClassName: { table: { disable: true } },
    "data-testid": { table: { disable: true } }
  }}
  decorators={metaSettings.decorators}
/>

<!--- Component template -->

export const counterTemplate = createComponentTemplate(Counter);

<!--- Component documentation -->

# Counter

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

Counters show the count of some adjacent data.

<Canvas>
  <Story name="Overview" args={{ count: 5 }}>
    {counterTemplate.bind({})}
  </Story>
</Canvas>

## Props

<ArgsTable story="Overview" />

## Usage

<UsageGuidelines
  guidelines={[
    "Counters are usually placed after the label of the item they're quantifying, such as the number of notifications. They should only be used to represent a number.",
    <div className="l3-storybook-counter_usage-link-line">
      The element the counter refers to should include{" "}
      <Link href="/?path=/docs/popover-tooltip--overview" withoutSpacing>
        Tooltip,
      </Link>{" "}
      where necessary, to enhance user understanding. For example, a badge is used in conjunction with an icon.
    </div>
  ]}
/>

<Tip title="Check yourself">
  Need to indicate information that is not numeric? Use the{" "}
  <Link href="/?path=/docs/data-display-label--overview" size={Link.sizes.SMALL} withoutSpacing>
    Label
  </Link>{" "}
  component instead.
</Tip>

## Variants

### Sizes

There are two sizes of counters

<Canvas>
  <Story name="Sizes">
    <div className="storybook-counter_column">
      <Counter count={5} />
      Big
    </div>
    <div className="storybook-counter_column">
      <Counter count={5} size={Counter.sizes.SMALL} />
      Small
    </div>
  </Story>
</Canvas>

### Colors

<Canvas>
  <Story name="Colors">
    <div className="storybook-counter_column">
      <Counter count={5} />
      Primary
    </div>
    <div className="storybook-counter_column">
      <Counter count={5} color={Counter.colors.NEGATIVE} />
      Negative or notification
    </div>
    <div className="storybook-counter_column">
      <Counter count={5} color={Counter.colors.DARK} />
      Dark
    </div>
    <div className="storybook-counter_column">
      <Counter count={5} color={Counter.colors.LIGHT} />
      Light
    </div>
  </Story>
</Canvas>

### Outline

<Canvas>
  <Story name="Outline">
    <div className="storybook-counter_column">
      <Counter count={5} kind={Counter.kinds.LINE} />
      Primary
    </div>
    <div className="storybook-counter_column">
      <Counter count={5} color={Counter.colors.NEGATIVE} kind={Counter.kinds.LINE} />
      Negative or notification
    </div>
    <div className="storybook-counter_column">
      <Counter count={5} color={Counter.colors.DARK} kind={Counter.kinds.LINE} />
      Dark
    </div>
    <div className="storybook-counter_column">
      <Counter count={5} color={Counter.colors.LIGHT} kind={Counter.kinds.LINE} />
      Light
    </div>
  </Story>
</Canvas>

### Limits

<Canvas>
  <Story name="Limits">
    <div className="storybook-counter_column">
      <Counter count={10} maxDigits={1} />
      One digit limit
    </div>
    <div className="storybook-counter_column">
      <Counter count={100} maxDigits={2} />
      Two digits limit
    </div>
    <div className="storybook-counter_column">
      <Counter count={1000} />
      Three digits limit
    </div>
  </Story>
</Canvas>

## Do’s and Don’ts

<ComponentRules
  rules={[
    {
      positive: {
        component: <Counter count={15} />,
        description: "Use counter to notify the number of items, such as notifications, updates, or inbox alerts."
      },
      negative: {
        component: <Counter count="New" />,
        description: (
          <>
            Don’t include any text. If you need a text label, use a{" "}
            <Link href="/?path=/docs/data-display-label--overview" withoutSpacing>
              Label.
            </Link>
          </>
        )
      }
    },
    {
      positive: {
        component: <Counter count={1000} />,
        description: "Only use a maximum of 3 digits in a counter."
      },
      negative: {
        component: <Counter count={1050} maxDigits={4} />,
        description: "Don’t use more than 3 digits in a counter."
      }
    }
  ]}
/>

## Use cases and examples

### Notification counter

Used on the notification icon to indicate the number of new notifications.

<Canvas>
  <Story name="Notification counter">
    {() => {
      const maxCount = 10;
      const initialCount = 4;
      const [count, setCount] = useState(4);
      const changeCountCallback = useCallback(() => {
        const newCount = count === maxCount ? initialCount : count + 1;
        setCount(newCount);
      }, [count, setCount]);
      useEffect(() => {
        setCount(initialCount);
      }, [initialCount, setCount]);
      useEffect(() => {
        const interval = setInterval(changeCountCallback, 1000);
        return () => {
          clearInterval(interval);
        };
      }, [changeCountCallback]);
      return (
        <div className="storybook-counter_position">
          <Avatar type={Avatar.types.ICON} icon={Notifications} backgroundColor={Avatar.colors.ROYAL} />
          <Counter
            count={count}
            maxDigits={1}
            color={Counter.colors.NEGATIVE}
            className="storybook-counter_counter-position-top"
          />
        </div>
      );
    }}
  </Story>
</Canvas>

### Counter on inbox filters

The counter represents the number of items on each topic.

<Canvas>
  <Story name="Counter on inbox filters">
    <div className="storybook-counter_wrapper">
      <span className="a">UX Writing & microcopy Re...</span>
      <span className="a"> Mobile Data- Iteration Plan...</span>
      <span className="a">Q Plans.</span>
    </div>
    <div className="storybook-counter_wrapper">
      <Counter count={195} color={Counter.colors.DARK} />
      <Counter count={141} color={Counter.colors.DARK} />
      <Counter count={99} color={Counter.colors.DARK} />
    </div>
  </Story>
</Canvas>

### Count the number of updates

The counter represents the number of items on each topic.

<Canvas>
  <Story name="Count the number of updates">
    <div className="storybook-counter_icon-wrapper">
      <Icon icon={AddUpdate} iconSize="36" />
      <div className="storybook-counter_line" />
      <div className="storybook-counter_position">
        <Icon icon={Update} iconSize="36" />
        <Counter count={5} size={Counter.sizes.SMALL} className="storybook-counter_counter-position-bot" />
      </div>
      <div className="storybook-counter_line" />
      <div className="storybook-counter_position">
        <Icon icon={Update} iconSize="36" />
        <Counter
          count={5}
          color={Counter.colors.DARK}
          size={Counter.sizes.SMALL}
          className="storybook-counter_counter-position-bot"
        />
      </div>
    </div>
  </Story>
</Canvas>

## Related components

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