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

import { MAIN } from '../_utils/taxonomy'
import { Review } from './index'

export const longComment =
  'This is very long review which is cool and etc. Morbi id vestibulum justo. Cras non ligula quis quam blandit placerat at eu urna. Praesent ac molestie nisl, id porta quam. Phasellus vel quam justo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Etiam ac ullamcorper quam. Suspendisse a dolor eu nisi fermentum ultrices. Nulla facilisi. Curabitur viverra finibus urna rutrum euismod. Integer lorem turpis, gravida non dictum ac, rutrum nec lectus.'
export const reviewProps = {
  title: 'Outstanding',
  text: longComment,
  formattedDatetime: '05 jul - 17:39',
  isoDatetime: '2017-08-07T14:10:40.526Z',
}

<Meta title={`${MAIN}/Ratings (Review)`} />

# Review

<Canvas>
  <Story name="Default">
    <Review {...reviewProps} />
  </Story>
</Canvas>

## Response

<Canvas>
  <Story name="withResponse">
    <Review
      title="Reply from Karen"
      text="Thanks for the comment!"
      formattedDatetime="06 jul - 18:39"
      isoDatetime="2017-08-07T18:39:40.526Z"
      isResponse
    />
  </Story>
</Canvas>

## With href reply link

<Canvas>
  <Story name="withReplyLink">
    <Review
      {...reviewProps}
      replyLinkLabel="Reply to ratings"
      replyLinkHref={<a target="_blank" href="/reply_ratings">edit_ratings</a>}
    />
  </Story>
</Canvas>

## With onClick reply link

<Canvas>
  <Story name="withOnClickLink">
    <Review
      {...reviewProps}
      replyLinkLabel="Reply to ratings"
      replyLinkOnClick={() => {
        // eslint-disable-next-line no-alert
        window.alert('Click!')
      }}
    />
  </Story>
</Canvas>

## Specifications

...

## Usage

```jsx
import { Review } from '@blablacar/ui-library/build/review'

<Review
  title="Reply from Karen"
  text="Thanks for the comment!"
  formattedDatetime="06 jul - 18:39"
  isoDatetime="2017-08-07T18:39:40.526Z"
  isResponse={true}
/>
```

<ArgsTable of={Review} />