import { ArgsTable, Canvas, Meta, Story } from "@storybook/addon-docs";
import {
  createComponentTemplate,
  createStoryMetaSettings,
  Link,
  RelatedComponents,
  Tip,
  UsageGuidelines,
  VerticalStories
} from "../../../storybook";
import {
  PROGRESS_BAR,
  TOGGLE,
  WIZARD
} from "../../../storybook/components/related-components/component-description-map";
import "./Slider.stories.scss";
import Slider from "../Slider";
import Sound from "../../Icon/Icons/components/Sound";
import Video from "../../Icon/Icons/components/Video";
import Tags from "../../Tags/Tags";
import {
  nonRangedSliderMouseEventsPlaySuite,
  rangedSliderMouseEventsPlaySuite
} from "../__tests__/Slider.interactions";

export const argTypes = createStoryMetaSettings({
  component: Slider,
  enumPropNamesArray: ["color", "size"]
});

<Meta title="Inputs/Slider - (Coming Soon)" component={Slider} argTypes={argTypes} />

<!--- Component template -->

export const sliderTemplate = createComponentTemplate(Slider);

<!--- Component documentation -->

# Slider

- [Overview](#overview)
- [Props](#props)
- [Usage](#usage)
- [Variants](#variants)
- [Related components](#related-components)
- [Feedback](#feedback)

## Overview

Slider is a visual input component that reflects current state status in its appearance.

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

## Props

<ArgsTable story="Overview" />

## Usage

<UsageGuidelines
  guidelines={[
    "Slider adjustment makes immediate changes to its content without need of saving",
    "Slider works best when the exact value does not matter for the user",
    "Slider works best for adjusting volume, setting playback time within a music player, adjusting brightness.",
    "If exact value is necessary use slider with label"
  ]}
/>
<Tip title="Not what you were looking for?">
  If you need to visualize progress use Wizard component instead{" "}
  <Link href="/?path=/docs/navigation-wizard--overview" size={Link.sizes.SMALL} withoutSpacing>
    See link
  </Link>
</Tip>

## Variants

### Sizes

Sizes small/medium/large are available.

<Canvas>
  <Story name="Sizes">
    <Slider size={Slider.sizes.SMALL} defaultValue={12} />
    <Slider size={Slider.sizes.MEDIUM} defaultValue={24} />
    <Slider size={Slider.sizes.LARGE} defaultValue={35} />
  </Story>
</Canvas>

### Ranged Slider

Slider can define range instead of single value

<Canvas>
  <Story name="Ranged" play={rangedSliderMouseEventsPlaySuite}>
    <Slider data-testid={"l3-ranged-slider-s"} size={Slider.sizes.SMALL} ranged={true} />
    <Slider data-testid={"l3-ranged-slider-m"} size={Slider.sizes.MEDIUM} ranged={true} defaultValue={[12, 55]} />
    <Slider size={Slider.sizes.LARGE} ranged={true} defaultValue={[25, 32]} />
  </Story>
</Canvas>

### Colors

Color Modes primary/positive/negative are available.

<Canvas>
  <Story name="Colors">
    <Slider color={Slider.colors.POSITIVE} defaultValue={34} size={Slider.sizes.MEDIUM} />
    <Slider color={Slider.colors.NEGATIVE} ranged={true} defaultValue={[12, 55]} size={Slider.sizes.MEDIUM} />
    <Slider color={Slider.colors.PRIMARY} defaultValue={12} size={Slider.sizes.MEDIUM} />
  </Story>
</Canvas>

### Disabled

Slider can be disabled.

<Canvas>
  <Story name="Disabled">
    <Slider disabled={true} defaultValue={24} color={Slider.colors.POSITIVE} size={Slider.sizes.MEDIUM} />
    <Slider disabled={true} color={Slider.colors.NEGATIVE} size={Slider.sizes.MEDIUM} />
    <Slider
      disabled={true}
      ranged={true}
      defaultValue={[12, 55]}
      color={Slider.colors.PRIMARY}
      size={Slider.sizes.MEDIUM}
    />
  </Story>
</Canvas>

### With labels

Indicate selection at Label, Add Prefix and/or Postfix Icons or Labels

<Canvas>
  <Story name="WithLabels" decorators={[VerticalStories]}>
    <Slider indicateSelection={true} defaultValue={12} size={Slider.sizes.SMALL} />
    <Slider indicateSelection={true} ranged={true} defaultValue={[12, 55]} size={Slider.sizes.SMALL} />
    <Slider prefix={{ icon: Sound }} indicateSelection={true} defaultValue={70} size={Slider.sizes.SMALL} />
    <Slider prefix={{ icon: Video }} postfix={{ icon: Sound }} defaultValue={45} size={Slider.sizes.MEDIUM} />
    <Slider prefix="Vol" indicateSelection={true} defaultValue={0} size={Slider.sizes.LARGE} />
  </Story>
</Canvas>

### Always show Slider's value

Always show value of slider (instead of Tooltip).

<Canvas>
  <Story name="ShowValue" play={nonRangedSliderMouseEventsPlaySuite}>
    <Slider data-testid={"l3-slider-show-value-s"} showValue={true} defaultValue={12} size={Slider.sizes.SMALL} />
    <Slider data-testid={"l3-slider-show-value-m"} showValue={true} defaultValue={55} size={Slider.sizes.MEDIUM} />
    <Slider data-testid={"l3-slider-show-value-l"} showValue={true} defaultValue={89} size={Slider.sizes.LARGE} />
  </Story>
</Canvas>

### Limit and Step

Limit and Step can be customized.

<Canvas>
  <Story name="Limits, Steps" decorators={[VerticalStories]}>
    <Slider prefix="Step 10" step={10} indicateSelection={true} defaultValue={10} size={Slider.sizes.SMALL} />
    <Slider
      prefix="Step 2, Max: 20"
      max={20}
      step={2}
      indicateSelection={true}
      defaultValue={4}
      size={Slider.sizes.MEDIUM}
    />
    <Slider
      prefix="from 20%"
      postfix="till 80%"
      min={20}
      max={80}
      showValue={true}
      defaultValue={62}
      size={Slider.sizes.LARGE}
    />
    <Slider ranged={true} indicateSelection={true} min={100} max={200} step={10} size={Slider.sizes.LARGE} />
  </Story>
</Canvas>

### Customisation

Custom ID, custom `data-testid` and Custom Class. Add Custom Items as Prefix and Postfix of Slider.

**Important!** Please use customisation very careful, only if you really need it. Check twice with your Product/Designer.

<Canvas>
  <Story name="Customisation" decorators={[VerticalStories]}>
    <Slider
      id="my-app-slider"
      data-testid={"my-app-slider"}
      className="my-custom-class"
      defaultValue={19}
      prefix="Check Dev-Tools for Custom Classes"
      size={Slider.sizes.MEDIUM}
    />
    <Slider
      id="custom-value-formatter"
      className="my-custom-formatter"
      defaultValue={3}
      min={1}
      max={10}
      indicateSelection={true}
      valueFormatter={value => `${value}GB`}
      prefix="Custom value formatter"
      size={Slider.sizes.MEDIUM}
    />
    <Slider
      id="custom-value-formatter"
      className="my-long-formatter"
      defaultValue={3}
      min={1}
      max={10}
      indicateSelection={true}
      selectionIndicatorWidth="120px"
      valueFormatter={value => `${value} meter/hour`}
      prefix="Long value formatter"
      size={Slider.sizes.MEDIUM}
    />
    <Slider
      id="custom-prefix"
      className="my-slider-wide"
      defaultValue={50}
      prefix={<Tags label="Custom component" readOnly />}
      postfix={(value, valueText) => {
        // set css: .my-slider-wide { max-width: none }
        return <span style={{ "white-space": "nowrap" }}>{`RenderProps: ${valueText} (${value}) `}</span>;
      }}
      size={Slider.sizes.MEDIUM}
    />
  </Story>
</Canvas>

## Related components

<RelatedComponents componentsNames={[PROGRESS_BAR, TOGGLE, WIZARD]} />
