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

import { MAIN } from '../_utils/taxonomy'
import { Button } from '../button'
import { EmptyStateIllustration } from '../illustration/emptyState'
import { EmptyState } from './index'

<Meta title={`${MAIN}/Empty State`} />

# Empty State

### with simple text

<Canvas>
  <Story name="With simple text">
    <EmptyState
      illustration={<img src="https://cdn.blablacar.com/kairos/assets/build/images/astronaut-79c2cfcb1a66f7c9afc1bbc50f0037fd.svg" alt="" />}
      text={text('text', 'Nothing there...')}
    />
  </Story>
</Canvas>

### with JSX text

<Canvas>
  <Story name="With JSX text">
    <EmptyState
      illustration={<img src="https://cdn.blablacar.com/kairos/assets/build/images/astronaut-79c2cfcb1a66f7c9afc1bbc50f0037fd.svg" alt="" />}
      text={<h1>This H1 contains a span!<span style={{ color: 'gray' }}> But nothing else.</span></h1>}
    />
  </Story>
</Canvas>

### with button

<Canvas>
  <Story name="With button">
    <EmptyState
      illustration={<img src="https://cdn.blablacar.com/kairos/assets/build/images/astronaut-79c2cfcb1a66f7c9afc1bbc50f0037fd.svg" alt="" />}
      text={text('text', 'Please click the button below:')}
      button={<Button>Go there!</Button>}
    />
  </Story>
</Canvas>

### with illustration

<Canvas>
  <Story name="With illustration">
    <EmptyState
      illustration={<EmptyStateIllustration title="Empty illustration" />}
      text={text('text', 'Please click the button below:')}
      button={<Button>Go there!</Button>}
    />
  </Story>
</Canvas>

## Specifications

### Normal state

Empty states can appear in different places (e.g. search results, auto complete…).

In Empty states we center components (e.g. The Voice, buttons…).

Actions are displayed directly after the message (e.g. buttons are not displayed at the bottom of the screen).

### Illustrations

Illustrations should have the max possible size (full width) and keep the W:H ratio when scalling WHILE not exceeding 1/3 of the screen height.

### Content

| DO                                                           | DO NOT           |
| ------------------------------------------------------------ | ---------------- |
| Write two sentences.                                         | Excuse yourself. |
| The first sentence refers to the missing element.            |                  |
| The second one guides the member to the action she can make. |                  |

## Usage

```jsx
import { EmptyState } from '@blablacar/ui-library/build/emptyState'
import { EmptyStateIllustration } from '../illustration/emptyState'

// With a HTML <img/>
<EmptyState
  illustration={<img src="https://cdn.blablacar.com/kairos/assets/build/images/astronaut-79c2cfcb1a66f7c9afc1bbc50f0037fd.svg" alt="" />}
  text="Nothing here!"
  button={<Button>Go there!</Button>}
/>

// With an illustration
<EmptyState
  illustration={<EmptyStateIllustration title="" />}
  text="Nothing here!"
  button={<Button>Go there!</Button>}
/>
```

<ArgsTable of={EmptyState} />