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

import { APP } from '../_utils/taxonomy'
import { BaseSection } from '../layout/section/baseSection'
import { Snackbar } from './index'

<Meta title={`${APP}/Snackbar`} />

# **Snackbar**

export const SnackbarWithButton = () => {
  const [isOpened, setOpened] = useState(false)
  return (
    <BaseSection>
      <button
        type="button"
        onClick={() => {
          setOpened(!isOpened)
        }}
      >
        Click here!
      </button>
      <Snackbar isOpen={isOpened} close={() => setOpened(false)}>
        I told you not to click on this button!
      </Snackbar>
    </BaseSection>
  )
}

<Canvas>
  <Story name="Default">
    <SnackbarWithButton />
  </Story>
</Canvas>

## Specifications

### Normal state

These error messages are not specific to an info / component.
They can appear at any moment if there’s any external issue (e.g. No internet connection) or after the user has made an action . If something is wrong we display an error message.

They always appear at the bottom of the screen and are sticky (exception: appears above the tab bar). User can discard them by tapping on the cross.
They appear above keyboards.

### Long texts

There’s no limitation on the number of lines (content should make it as short as possible).

### Behaviour

When there’s an error in a one screen action we hide the next button or primary button.
When everything goes back to normal we display buttons again.
If user taps on the cross to discard the error we display the buttons again.

If there are several errors at the same time we only display the latest one.

### Duration

MAX(4, nbLetter / 20)

### Animation

To come soon (appears from bottom.)

## Usage

```jsx
import { Snackbar } from '@blablacar/ui-library/build/snackbar'

export const SnackbarWithButton = () => {
  const [isOpened, setOpened] = useState(false)
  return (
    <BaseSection>
      <button
        onClick={() => {
          setOpened(!isOpened)
        }}
      >
        Click here!
      </button>
      <Snackbar isOpen={isOpened} close={() => setOpened(false)}>
        I told you not to click on this button!
      </Snackbar>
    </BaseSection>
  )
}
```

<ArgsTable of={Snackbar} />