import LinearProgressBar from "../LinearProgressBar";
import { useMemo } from "react";
import { ArgsTable, Canvas, Meta, Story } from "@storybook/addon-docs";
import { createStoryMetaSettings } from "../../../../storybook/functions/createStoryMetaSettings";
import colors from "../../../../constants/colors.json";
import DialogContentContainer from "../../../DialogContentContainer/DialogContentContainer";
import { Info } from "../../../Icon/Icons";
import Icon from "../../../Icon/Icon";
import {
  SKELETON,
  SPINNER,
  STEPPER
} from "../../../../storybook/components/related-components/component-description-map";
import { Link } from "../../../../storybook/components";
import BreadcrumbItem from "../../../BreadcrumbsBar/BreadcrumbItem/BreadcrumbItem";
import BreadcrumbsBar from "../../../BreadcrumbsBar/BreadcrumbsBar";
import "./linearProgressBar.stories.scss";

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

<Meta
  title="Feedback/LinearProgressBar - (In Progress)"
  component={LinearProgressBar}
  argTypes={metaSettings.argTypes}
  decorators={metaSettings.decorators}
/>

<!--- Component template -->

export const lineProgressBarTemplate = args => {
  return <LinearProgressBar className="linear-progress-bar_small-wrapper" {...args} />;
};

<!--- Component documentation -->

# LinearProgressBar

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

Progress bars show continuous progress through a process, such as a percentage value. They show how much progress is complete and how much remains.

<Canvas>
  <Story name="Overview" args={{ value: 20, size: LinearProgressBar.sizes.LARGE }}>
    {lineProgressBarTemplate.bind({})}
  </Story>
</Canvas>

## Props

<ArgsTable of={LinearProgressBar} />

## Usage

<UsageGuidelines
  guidelines={["Give users an indication of how much of the task has been completed and how much is left."]}
/>

<Tip>
  If you need to lead a user through a progress, use the{" "}
  <Link href="/?path=/docs/navigation-wizard--overview" size={Link.sizes.SMALL} withoutSpacing>
    Wizard
  </Link>{" "}
  instead.
</Tip>

## Variants

### Regular

<Canvas>
  <Story name="Regular">
    <div className="linear-progress-bar_column">
      <div className="linear-progress-bar_block">
        <LinearProgressBar
          className="linear-progress-bar_small-wrapper"
          indicateProgress
          value={30}
          size={LinearProgressBar.sizes.LARGE}
        />
        With label
      </div>
      <div className="linear-progress-bar_block">
        <LinearProgressBar
          className="linear-progress-bar_small-wrapper"
          value={30}
          size={LinearProgressBar.sizes.LARGE}
        />
        Without label
      </div>
    </div>
  </Story>
</Canvas>

### Size (thickness)

<Canvas>
  <Story name="Size (thickness)">
    <div style={{ display: "flex", flexDirection: "column", gap: "20px", marginTop: "15px" }}>
      <LinearProgressBar
        className="linear-progress-bar_small-wrapper"
        value={25}
        indicateProgress
        size={LinearProgressBar.sizes.SMALL}
      />
      <LinearProgressBar
        className="linear-progress-bar_small-wrapper"
        value={50}
        indicateProgress
        size={LinearProgressBar.sizes.MEDIUM}
      />
      <LinearProgressBar
        className="linear-progress-bar_small-wrapper"
        value={100}
        indicateProgress
        size={LinearProgressBar.sizes.LARGE}
      />
    </div>
  </Story>
</Canvas>

### With secondary value

<Canvas>
  <Story name="With secondary value">
    <LinearProgressBar
      className="linear-progress-bar_small-wrapper"
      value={50}
      indicateProgress
      valueSecondary={65}
      size={LinearProgressBar.sizes.LARGE}
    />
  </Story>
</Canvas>

### Multi progress bar

<Canvas>
  <Story name="Multi progress bar">
    {() => {
      const multiValues = useMemo(
        () => [
          { value: 25, color: colors.primary },
          { value: 75, color: colors.yellow },
          { value: 100, color: colors.grass_green }
        ],
        []
      );
      return (
        <LinearProgressBar
          className="linear-progress-bar_big-wrapper"
          value={25}
          size={LinearProgressBar.sizes.LARGE}
          indicateProgress
          multi
          multiValues={multiValues}
        />
      );
    }}
  </Story>
</Canvas>

## Do’s and Don’ts

<ComponentRules
  rules={[
    {
      positive: {
        component: (
          <DialogContentContainer className="linear-progress-bar_dialog-wrapper">
            <h4>Items usage</h4>
            <div className="linear-progress-bar_inline-wrapper">
              <span>Items</span>
              <span>142/200</span>
            </div>
            <LinearProgressBar value={71} />
          </DialogContentContainer>
        ),
        description: "Use a progress bar only process has start and finish point."
      },
      negative: {
        component: (
          <DialogContentContainer className="linear-progress-bar_dialog-wrapper">
            <h4>Storage</h4>
            <div className="linear-progress-bar_row-wrapper">
              <div className="linear-progress-bar_title">Drive 1</div>
              <LinearProgressBar className="linear-progress-bar_without-bg" value={88} />
            </div>
            <div className="linear-progress-bar_row-wrapper">
              <div className="linear-progress-bar_title">Drive 2</div>
              <LinearProgressBar className="linear-progress-bar_without-bg" value={46} />
            </div>
            <div className="linear-progress-bar_row-wrapper">
              <div className="linear-progress-bar_title">Drive 3</div>
              <LinearProgressBar className="linear-progress-bar_without-bg" value={72} />
            </div>
          </DialogContentContainer>
        ),
        description: "Don’t use an infinite scalable indicator."
      }
    },
    {
      positive: {
        component: (
          <DialogContentContainer className="linear-progress-bar_dialog-wrapper">
            <h4>Loading files</h4>
            <div className="linear-progress-bar_inline-wrapper">
              <span>0%</span>
              <span>100%</span>
            </div>
            <LinearProgressBar value={50} />
          </DialogContentContainer>
        ),
        description: "Always indincate visually the empty part of the progress bar."
      },
      negative: {
        component: (
          <DialogContentContainer className="linear-progress-bar_dialog-wrapper">
            <h4>Loading files</h4>
            <div className="linear-progress-bar_inline-wrapper">
              <span>0%</span>
              <span>100%</span>
            </div>
            <LinearProgressBar className="linear-progress-bar_without-bg" value={50} />
          </DialogContentContainer>
        ),
        description: "Don’t let the user guess where is the end of the progress."
      }
    }
  ]}
/>

## Use cases and examples

### Progress bar as a counter

The user can see in a clear way the number of items used in the account.

<Canvas>
  <Story name="Progress bar as a counter">
    <div className="linear-progress-bar_box">
      <h4>Loading files</h4>
      <div className="linear-progress-bar_inline-wrapper">
        <div className="linear-progress-bar_icon-wrapper">
          Items
          <Icon icon={Info} />
        </div>
        <span>142/200</span>
      </div>
      <LinearProgressBar value={71} size={LinearProgressBar.sizes.LARGE} barStyle={LinearProgressBar.styles.POSITIVE} />
    </div>
  </Story>
</Canvas>

### Progress bar as loading indicator

<Canvas>
  <Story name="Progress bar as loading indicator">
    <div className="linear-progress-bar_box-wrapper">
      <div className="linear-progress-bar_row">
        <div className="linear-progress-bar_img" />
        <div className="linear-progress-bar_aside">
          <b>Frame 697.pg</b>
          <BreadcrumbsBar className="linear-progress-bar_breadcrumbs">
            <BreadcrumbItem text="Hadas Test" />
            <BreadcrumbItem text="Activity 6" />
          </BreadcrumbsBar>
          <div className="linear-progress-bar_inline-wrapper">
            <span>2KB</span>
            <span>Saving...</span>
          </div>
        </div>
      </div>
      <LinearProgressBar value={71} />
    </div>
  </Story>
</Canvas>

## Related components

<RelatedComponents componentsNames={[SPINNER, STEPPER, SKELETON]} />
