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

<Meta
  title="Components/Conversation/Message/MessageChat"
  component={Message}
  parameters={{
    design: {
      type: 'figma',
      url:
        'https://www.figma.com/file/Wp9mDxTvWicSTWtezj2ImkMP/HSDS-Product?node-id=2582%3A10071',
    },
  }}
/>

# Message.Chat

A Chat component provides the UI for the primary content within a Message.

<Canvas>
  <Story name="Message.Chat">
    <Message to avatar={<Avatar name="Buddy" />}>
      <Message.Chat read timestamp="9:41am">
        Some message.
      </Message.Chat>
      <Message.Chat read timestamp="9:41am">
        Another message.
      </Message.Chat>
      <Message.Chat read timestamp="9:41am">
        One more.
      </Message.Chat>
      <Message.Chat read timestamp="9:41am" error>
        Error state, with default message.
      </Message.Chat>
      <Message.Chat read timestamp="9:41am" error="Something went wrong!">
        Error state, with custom message.
      </Message.Chat>
      {/* eslint-disable-next-line jsx-a11y/accessible-emoji */}
      <Message.Chat
        read
        timestamp="9:41am"
        caption="Caption before the bubble"
        metaPosition="top"
      >
        🦄❤️
      </Message.Chat>
      <Message.Chat
        read
        timestamp="9:41am"
        caption="Caption after the bubble"
        metaPosition="bottom"
      >
        With custom message & meta positioned AFTER the bubble
      </Message.Chat>
      <Message.Chat
        read
        timestamp="9:41am"
        caption="Caption before the bubble with jibberish metaPosition"
        metaPosition="qwerty"
      >
        With custom message & meta positioned before the bubble with jibberish
      </Message.Chat>
    </Message>
  </Story>
</Canvas>

### Props

<ArgsTable of={Message.Chat} />

### Stories

#### Note

<Canvas>
  <Story name="note">
    <Message to avatar={<Avatar name="Buddy" />}>
      <Message.Chat isNote read timestamp="9:41am">
        Note: SAAAAAAANTAAAAAAAA!
      </Message.Chat>
    </Message>
  </Story>
</Canvas>

#### Typing

<Canvas>
  <Story name="typing">
    <Message from avatar={<Avatar name="Arctic Puffin" />}>
      <Message.Chat typing />
    </Message>
  </Story>
</Canvas>
