// RCE CSS
import 'react-chat-elements/dist/main.css'
// MessageBox component
import { MessageBox } from 'react-chat-elements'

import { ChatItem } from 'react-chat-elements'
;<ChatItem
  avatar={'https://facebook.github.io/react/img/logo.svg'}
  alt={'Reactjs'}
  title={'Facebook'}
  subtitle={'What are you doing?'}
  date={new Date()}
  unread={0}
/>

import { MessageBox } from 'react-chat-elements'
;<MessageBox
  position={'left'}
  type={'photo'}
  text={'react.svg'}
  data={{
    uri: 'https://facebook.github.io/react/img/logo.svg',
    status: {
      click: false,
      loading: 0,
    },
  }}
/>

import { MessageBox } from 'react-chat-elements'
;<MessageBox
  reply={{
    photoURL: 'https://facebook.github.io/react/img/logo.svg',
    title: 'elit magna',
    titleColor: '#8717ae',
    message: 'Aliqua amet incididunt id nostrud',
  }}
  onReplyMessageClick={() => console.log('reply clicked!')}
  position={'left'}
  type={'text'}
  text={'Tempor duis do voluptate enim duis velit veniam aute ullamco dolore duis irure.'}
/>

import { MeetingMessage } from 'react-chat-elements'

<MeetingMessage
    subject={'New Release'}
    title={'in ullamco'}
    date={new Date()}
    collapseTitle={'Commodo aliquip'}
    participants={[
        {
            id: '1',
            title: 'Facebook',
        },
        .
        .
        .
    ]}
    dataSource={[
        {
            id: '1',
            avatar: 'https://facebook.github.io/react/img/logo.svg',
            message: 'Lorem ipsum dolor sit amet.',
            title: 'Elit magna',
            avatarFlexible: true,
            date: new Date(),
            event: {[
                title: 'Toplantı sona erdi!',
                avatars={[
                    src: 'https://facebook.github.io/react/img/logo.svg'
                ]}
            ]}
            record: {[
                avatar: 'https://facebook.github.io/react/img/logo.svg',
                title: 'Arama',
                savedBy: 'Kaydeden: Elit magna',
                time: new Date(),
            ]}
        },
        .
        .
        .
    ]} />

import { MeetingLink } from 'react-chat-elements'
;<MeetingLink meetingID='1' title='Lorem ipsum dolor sit amet.' />

import { SystemMessage } from 'react-chat-elements'
;<SystemMessage text={'End of conversation'} />

import { MessageList } from 'react-chat-elements'
messageListReferance = React.createRef();

<MessageList
	referance={messageListReferance}
	className='message-list'
	lockable={true}
	toBottomHeight={'100%'}
	dataSource={[
	    {
	        position: 'right',
	        type: 'text',
	        text: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit',
	        date: new Date(),
	    },
	    .
	    .
	    .
	]} />

import { ChatList } from 'react-chat-elements'

<ChatList
    className='chat-list'
    dataSource={[
        {
            avatar: 'https://facebook.github.io/react/img/logo.svg',
            alt: 'Reactjs',
            title: 'Facebook',
            subtitle: 'What are you doing?',
            date: new Date(),
            unread: 0,
        },
        .
        .
        .
    ]} />

import { Input } from 'react-chat-elements'
inputReferance = React.createRef()
;<Input
  referance={inputReferance}
  placeholder='Type here...'
  multiline={true}
  value={inputValue}
  rightButtons={<Button color='white' backgroundColor='black' text='Send' />}
/>

// Clear text, e.g.:

inputClear = () => {}
// ...
;<Input clear={clear => (inputClear = clear)} placeholder='Type here...' />
// ...
inputClear()

import { Button } from 'react-chat-elements'
;<Button text={'click me!'} />

import { Popup } from 'react-chat-elements'
;<Popup
  show={this.state.show}
  header='Lorem ipsum dolor sit amet.'
  headerButtons={[
    {
      type: 'transparent',
      color: 'black',
      text: 'close',
      onClick: () => {
        this.setState({ show: false })
      },
    },
  ]}
  text='Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem animi veniam voluptas eius!'
  footerButtons={[
    {
      color: 'white',
      backgroundColor: '#ff5e3e',
      text: 'Vazgeç',
    },
    {
      color: 'white',
      backgroundColor: 'lightgreen',
      text: 'Tamam',
    },
  ]}
/>

import { SideBar } from 'react-chat-elements'
;<SideBar top={<div>'TOP' area</div>} center={<div>'CENTER' area</div>} bottom={<div>'BOTTOM' area</div>} />

import { Navbar } from 'react-chat-elements'
;<Navbar left={<div>'LEFT' area</div>} center={<div>'CENTER' area</div>} right={<div>'RIGHT' area</div>} />

import { Dropdown } from 'react-chat-elements'
;<Dropdown
  buttonProps={{
    text: 'Dropdown',
  }}
  items={[
    {
      icon: {
        component: icon,
        float: 'left',
        color: 'red',
        size: 22,
      },
      text: 'lorem',
    },
    {
      icon: {
        component: icon,
        float: 'left',
        color: 'purple',
        size: 22,
      },
      text: 'ipsum',
    },
    {
      text: 'dolor',
    },
  ]}
/>

import { Avatar } from 'react-chat-elements'
;<Avatar src={'https://facebook.github.io/react/img/logo.svg'} alt={'logo'} size='large' type='circle flexible' />

import { LocationMessage } from 'react-chat-elements'
;<LocationMessage
  data={{
    latitude: '37.773972',
    longitude: '-122.431297',
    // staticURL: '<optional>',
    // mapURL: '<optional>'
  }}
/>

import { SpotifyMessage } from 'react-chat-elements'
;<SpotifyMessage theme='white' view='coverart' uri={'spotify:user:spotify:playlist:3rgsDhGHZxZ9sB9DQWQfuf'} />

import { MeetingItem } from 'react-chat-elements'
;<MeetingItem
  subject={'New Release!!!'}
  avatars={[
    {
      src: 'https://facebook.github.io/react/img/logo.svg',
    },
  ]}
  onMeetingClick={console.log}
  onShareClick={console.log}
  onCloseClick={console.log}
/>

import { MeetingList } from 'react-chat-elements'

<MeetingList
    className='meeting-list'
    dataSource={[
        {
            id: '1',
            subject: 'New Release',
            date: new Date(),
            avatars: [{
               src: 'https://facebook.github.io/react/img/logo.svg',
            }]
        },
        .
        .
        .
    ]} />