import { ArgsTable, Meta, Story, Canvas } from '@storybook/addon-docs/blocks';
import { ChatSettings } from '.';
import { Props } from './props';

import { threePersonChat, adam as currentUser, bob } from '../../util/mocks';

<Meta
  title="MultiChatWindow/ChatSettings"
  component={ChatSettings}
  argTypes={{
    username: { table: { category: 'state' } },
    isLoading: { table: { category: 'state' } },
    onInvitePersonClick: { table: { category: 'hooks' } },
    onRemovePersonClick: { table: { category: 'hooks' } },
    onDeleteChatClick: { table: { category: 'hooks' } },
    renderChatSettings: { table: { category: 'render functions' } },
    renderChatAvatars: { table: { category: 'render functions' } },
    renderPeopleSettings: { table: { category: 'render functions' } },
    renderPhotosSettings: { table: { category: 'render functions' } },
    renderOptionsSettings: { table: { category: 'render functions' } },
    style: { table: { category: 'styles' } },
    chatTitleStyle: { table: { category: 'styles' } },
    peopleSettingsStyle: { table: { category: 'styles' } },
    photosSettingsStyle: { table: { category: 'styles' } },
    optionsSettingsStyle: { table: { category: 'styles' } },
  }}
/>

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

# Chat Settings

The `<ChatSettings />` component represent aspects fo the `chat` object which you can customize.

## Default

<Story
  name="Default"
  args={{
    chat: threePersonChat,
    peopleToInvite: [bob],
    username: currentUser.username,
    style: {
      maxWidth: '400px',
      boxShadow: '0px 0px 3px 6px rgba(0, 0, 0, 0.1)',
    },
  }}
>
  {Template.bind({})}
</Story>

<ArgsTable story="Default" />

## Is Loading

You can make the settings page load without a `chat` prop by setting `isLoading` to `true`.

<Canvas>
  <Story
    name="Is Loading"
    args={{
      isLoading: true,
    }}
  >
    {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={{
      chat: threePersonChat,
      renderChatSettings: () => <>Your code here!</>,
    }}
  >
    {Template.bind({})}
  </Story>
</Canvas>

<Canvas>
  <Story
    name="Render Functions 2"
    args={{
      chat: threePersonChat,
      renderChatAvatars: () => <div>Your Avatars code here!</div>,
      renderPeopleSettings: () => <div>Your People code here!</div>,
      renderPhotosSettings: () => <div>Your Photos code here!</div>,
      renderOptionsSettings: () => <div>Your Options code here!</div>,
    }}
  >
    {Template.bind({})}
  </Story>
</Canvas>

## Custom Styles

You can customize the look and feel with the `*Style` props.

<Canvas>
  <Story
    name="Custom Styles"
    args={{
      chat: threePersonChat,
      style: { maxWidth: '400px', border: '2px solid red' },
      chatTitleStyle: { border: '2px solid blue' },
      peopleSettingsStyle: { border: '2px solid green' },
      photosSettingsStyle: { border: '2px solid orange' },
      optionsSettingsStyle: { border: '2px solid violet' },
    }}
  >
    {Template.bind({})}
  </Story>
</Canvas>