import { ArgsTable, Meta, Story, Canvas } from '@storybook/addon-docs/blocks';
import { CheckOutlined, DeleteOutlined } from '@ant-design/icons';

import { ChatCard } from '.';
import { Props } from './props';

<Meta
  title="MultiChatWindow/ChatList/ChatCard"
  component={ChatCard}
  argTypes={{
    hasNotification: { table: { category: 'state' } },
    isActive: { table: { category: 'state' } },
    isLoading: { table: { category: 'state' } },
    onClick: { table: { category: 'hooks' } },
    renderAvatar: { table: { category: 'render functions' } },
    renderChatCard: { table: { category: 'render functions' } },
    style: { table: { category: 'styles' } },
    hoveredStyle: { table: { category: 'styles' } },
    activeStyle: { table: { category: 'styles' } },
    avatarStyle: { table: { category: 'styles' } },
    titleStyle: { table: { category: 'styles' } },
    notificationStyle: { table: { category: 'styles' } },
    subtitleStyle: { table: { category: 'styles' } },
    timeStampStyle: { table: { category: 'styles' } },
    loadingBarStyle: { table: { category: 'styles' } },
  }}
/>

export const Template = (args) => <ChatCard {...args} />;

# Chat Card

The Chat Card component represents a Chat room to click on.

## Default

<Story
  name="Default"
  args={{
    title: 'Chat Card',
    description: 'This is where the magic happens',
    timeStamp: '4:24 PM',
    avatarUsername: 'Adam',
    style: {
      maxWidth: '400px',
      boxShadow: '0px 0px 3px 6px rgba(0, 0, 0, 0.1)',
    },
  }}
>
  {Template.bind({})}
</Story>

<ArgsTable story="Default" />

## Has Notification

You can see a notification dot if `hasNotification` is `true`.

<Canvas>
  <Story
    name="Has Notification"
    args={{
      avatarUsername: 'Adam',
      title: 'Notification Card',
      description: 'Alert alert!!!',
      timeStamp: 'Tues',
      hasNotification: true,
      style: {
        maxWidth: '400px',
        boxShadow: '0px 0px 3px 6px rgba(0, 0, 0, 0.1)',
      },
    }}
  >
    {Template.bind({})}
  </Story>
</Canvas>

## Is Active

By default, the Chat Card component appears darker when `isActive` is `true`.

<Canvas>
  <Story
    name="Is Active"
    args={{
      avatarUsername: 'Adam',
      title: 'Active Chat Card',
      description: 'You are in this chat now...',
      timeStamp: '12:59 PM',
      isActive: true,
      style: {
        maxWidth: '400px',
      },
    }}
  >
    {Template.bind({})}
  </Story>
</Canvas>

## Is Loading

You can see data has not appeared yet if `isLoading` is `true`.

<Canvas>
  <Story
    name="Is Loading"
    args={{
      avatarUsername: 'Adam',
      title: 'Notification Card',
      description: 'Alert alert!!!',
      timeStamp: 'Tues',
      isLoading: true,
      style: {
        maxWidth: '400px',
        boxShadow: '0px 0px 3px 6px rgba(0, 0, 0, 0.1)',
      },
    }}
  >
    {Template.bind({})}
  </Story>
</Canvas>

## Render Functions

You can render you own code instead of this component with the `render*` functions.

<Canvas>
  <Story
    name="Render Functions"
    args={{
      avatarUsername: 'Adam',
      title: 'Notification Card',
      description: 'Alert alert!!!',
      timeStamp: 'Tues',
      renderChatCard: (props) => <>Your code here: {props.title}</>,
    }}
  >
    {Template.bind({})}
  </Story>
</Canvas>

## Render Avatar

Another example to replace the avatar.

<Canvas>
  <Story
    name="Render Avatar"
    args={{
      avatarUsername: 'Adam',
      title: 'Notification Card',
      description: 'Alert alert!!!',
      timeStamp: 'Tues',
      renderAvatar: (props) => <>yo</>,
    }}
  >
    {Template.bind({})}
  </Story>
</Canvas>

## Custom Style

There are a list of `*Style` props which customize various parts of the component.

<Canvas>
  <Story
    name="Custom Style"
    args={{
      title: 'Notification Card',
      description: 'Alert alert!!!',
      timeStamp: 'Tues',
      hasNotification: true,
      style: {
        maxWidth: '400px',
        border: '2px solid red',
      },
      hoveredStyle: { border: '2px solid lime' },
      activeStyle: { border: '2px solid pink' },
      avatarStyle: { border: '2px solid grey' },
      titleStyle: { border: '2px solid blue' },
      notificationStyle: { border: '2px solid deeppink' },
      subtitleStyle: { border: '2px solid green' },
      timeStampStyle: { border: '2px solid orange' },
      loadingBarStyle: { border: '2px solid purple' },
    }}
  >
    {Template.bind({})}
  </Story>
</Canvas>