import React from 'react';
import { isStaff } from '../../../../initial_state';

export default class ContactsList extends React.PureComponent {

  submitCompose() {

  }

  render() {

    // return (
    //   <div >
    //     liste de contacts
    //   </div >
    // );
    const contactlist = null;

    return (
      <div className='messaging-container'>
        <div className='messaging-box'>
          <div className='title'>
            <i
              role='img'
              className='fa fa-envelope column-header__icon fa-fw'
            />
            Messaging box
            {isStaff &&
            <span >
            Je suis admin oui oui
            </span >
            }
          </div >
          <div className='user-list column-header'>
            <h2 className='title'>User list</h2 >
            <ul >
              {contactlist &&
              <p >
                la liste de contacts
              </p >
              }
            </ul >
          </div >

        </div >
        <div className='conversations_list'>
          <ul >
            <li className='conversations_item has-new-message'>
              <div className='title'>
                <i
                  role='img'
                  className='fa fa-envelope column-header__icon fa-fw'
                />
                Un Gens
                <span className='new-message-counter'>
          (3)</span >
                <button className='btn-small'>
                  <i
                    role='img'
                    className='fa fa-caret-down column-header__icon fa-fw'
                  />
                </button >
              </div >
              <div className='conversation_stream'>
                <div className='message theirs'>
                  <p >oh hello there! 😋 </p >
                  <div className='arrow-down' />
                </div >
                <div className='message mine'>
                  <p >General Emoji</p >
                  <div className='arrow-down' />
                </div >
                <div className='message theirs'>
                  <p >we just achieved comedy</p >
                  <div className='arrow-down' />
                </div >
              </div >
              <div className='conversation_input'>
                <form
                  action='#'
                  onSubmit={this.submitCompose()}
                >
                  <textarea
                    name='messager'
                    id=''
                    cols='15'
                    rows='3'
                    className='messager-textarea'
                    placeholder='allez dis nous tout'

                  />
                  <input
                    type='submit'
                    name='submit'
                    value='Send'
                  />
                </form >
              </div >
            </li >
          </ul >
        </div >
      </div >
    );
  }

}