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

import { MAIN } from '../_utils/taxonomy'
import { RidePublishedIllustration } from '../illustration/ridePublished'
import { SuccessModal } from './index'
import { ModalWithButton } from './SuccessModal.example'

<Meta title={`${MAIN}/Success Screens`} />

# **Success Screens **

<Canvas>
  <Story name="Default">
    <SuccessModal
      isOpen
      onClose={() => {}}
      illustration={<RidePublishedIllustration />}
      confirmLabel="Got it!"
      closeOnEsc
    >
      {text('children', 'Booking approved! Buddy will travel with you')}
    </SuccessModal>
  </Story>
</Canvas>

# **Behavior**

<Canvas>
  <Story name="with a HTML image">
    <ModalWithButton
      illustration={(
        <img
          src="https://cdn.blablacar.com/insurance/assets/2b950c73301c3b8526772644de550035.svg"
          alt="Illustation description"
        />
      )}
    />
  </Story>
  <Story name="with an illustration">
    <ModalWithButton illustration={<RidePublishedIllustration />} />
  </Story>
</Canvas>


## Specifications

### Normal state

There’s always an illustration at the top of the screen (on the left on `large` screen).
This illustration could be animated.
There’s a centred white the voice and always a generic button.

### Navigate

There’s no top bar in a success screen so user can’t go back. If the user is using the browser back we redirect him to the right page depending on the case.

### Animation

No animation specs yet but for now let’s make it appear with a fade in and disappear with a fade out.

### Layout

This modal is always being displayed in fullscren. Use `size` prop to change the layout depending on the screen size.

## Usage

```jsx
import { SuccessModal } from '@blablacar/ui-library/build/successModal'
export const ModalWithButton = () => {
  const [isOpened, setOpened] = useState(false)
  return (
    <BaseSection>
      <button
        onClick={() => {
          setOpened(true)
        }}
      >
        Open SuccessModal
      </button>
      <SuccessModal
        isOpen={isOpened}
        onClose={() => {
          setOpened(false)
        }}
        illustration={
          <img
            src="https://cdn.blablacar.com/insurance/assets/2b950c73301c3b8526772644de550035.svg"
            alt="Illustation description"
          />
        }
        confirmLabel="Got it!"
        closeOnEsc
      >
        {text('children', 'Booking approved! Buddy will travel with you')}
      </SuccessModal>
    </BaseSection>
  )
}
```

You can also use illustration component instead of an image:

```jsx
import { SuccessModal } from '@blablacar/ui-library/build/successModal'
import { RidePublishedIllustration } from '@blablacar/ui-library/build/illustration/ridePublished'
;<SuccessModal
  isOpen={isOpened}
  onClose={() => {
    setOpened(false)
  }}
  illustration={
    <img
      src="https://cdn.blablacar.com/insurance/assets/2b950c73301c3b8526772644de550035.svg"
      alt="Illustation description"
    />
  }
  confirmLabel="Got it!"
  closeOnEsc
>
  Booking approved! Buddy will travel with you
</SuccessModal>
```

<ArgsTable of={SuccessModal} />