import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs/blocks'

import { BASIC } from '../_utils/taxonomy'
import { Address, Itinerary } from '../itinerary'
import { TextTitle } from '../typography/title'
import { Stepper, StepperDisplay } from './index'

<Meta title={`${BASIC}/Stepper`} />

# **Stepper**

<Canvas>
  <Story name="Default">
    <Stepper
      name="stepper1"
      min={Number.MIN_SAFE_INTEGER}
      max={Number.MAX_SAFE_INTEGER}
      step={2}
      value={5}
      increaseLabel="Increment"
      decreaseLabel="Decrement"
      display={StepperDisplay.SMALL}
      title="Number of seats"
      disabled={false}
    />
  </Story>
</Canvas>

### With formatted value

<Canvas>
  <Story name="with formatted value">
    <Stepper
      name="stepper2"
      min={0}
      max={10}
      step={2}
      value={5}
      increaseLabel="Increment"
      decreaseLabel="Decrement"
      format={value => `${value} €`}
      display={StepperDisplay.SMALL}
      title="Edit the price"
      disabled={false}
    />
  </Story>
</Canvas>

### With large formatted value

<Canvas>
  <Story name="with large formatted value">
    <Stepper
      name="stepper3"
      min={0}
      max={99999}
      step={100}
      value={8400}
      increaseLabel="Increment"
      decreaseLabel="Decrement"
      format={value => `${value} грн.`}
      display={StepperDisplay.LARGE}
      title="Edit the price"
      disabled={false}
    />
  </Story>
</Canvas>

### With `Itinerary` as left addon

<Canvas>
  <Story name="with itinerary leftAddon">
    <Stepper
      name="stepper4"
      min={0}
      max={99999}
      step={100}
      value={8400}
      increaseLabel="Increment"
      decreaseLabel="Decrement"
      format={value => `${value} грн.`}
      display={StepperDisplay.SMALL}
      title="Edit the price"
      disabled={false}
      leftAddon={<Itinerary small><Address label="Paris" /><Address label="Nantes" /></Itinerary>}
    />
  </Story>
</Canvas>

### With text as left addon

<Canvas>
  <Story name="with text leftAddon">
    <Stepper
      name="stepper5"
      min={1}
      max={8}
      step={1}
      value={3}
      increaseLabel="Increment"
      decreaseLabel="Decrement"
      display={StepperDisplay.SMALL}
      title="Edit passengers count"
      disabled={false}
      leftAddon={<TextTitle>Passengers</TextTitle>}
    />
  </Story>
</Canvas>

### With colors thresholds

<Canvas>
  <Story name="with price thresholds">
    <Stepper
      name="stepper6"
      min={1}
      max={8}
      threshold={{ medium: 5, high: 7 }}
      step={1}
      value={3}
      increaseLabel="Increment"
      decreaseLabel="Decrement"
      format={value => `${value} €`}
      display={StepperDisplay.LARGE}
      title="Edit passengers count"
      disabled={false}
    />
  </Story>
</Canvas>

## Specifications

> Normal state

This stepper is used in one screen one action pages.

> Behaviour

When reaching the highest value the “increase” button is disabled. Same thing when reaching the lowest value, the “decrease” button is disabled.

We can’t display more than 1 stepper on the same line.

When user is coming back from the next step, we remember the value.

> Long texts

It can’t go on more than 1 line. If data is too long we reduce the font size.

## Usage

```jsx
import { Stepper } from '@blablacar/ui-library/build/stepper'

<Stepper
  name="price"
  min={1}
  max={100}
  step={2}
  value={5}
  increaseLabel="Increment"
  decreaseLabel="Decrement"
  format={value => `${value} €`}
  onChange={onChange}
  display={StepperDisplay.SMALL}
  title="Edit the price"
/>
```

<ArgsTable of={Stepper} />