import React from 'react';
import PropTypes from 'prop-types';
import ConversationStream from './conversation-stream';

/**
 * a conversation between the current logged in user and one recipient
 */
export default class ConversationItem extends React.PureComponent {

  static propTypes = {
    messages   : PropTypes.array, // our and their message sorted chronologically
    recipient  : PropTypes.any, // account of the person we talk to, not current logged in account
    newMessages: PropTypes.number,
    displayed  : PropTypes.bool,
  };
  static defaultProps = {
    newMessages: 0,
    displayed  : true,
  };
  following = [];

  constructor(props) {
    super(props);
    console.log('props', props);
    this.state = {
      composeMessage: '',
      displayed     : this.props.displayed,
      newMessages   : this.props.newMessages,
      isFocused     : false,
    };
  }

  submitCompose = (e) => {
    e.preventDefault();

    console.log('submit');
  };

  toggleVisibility = () => {
    this.setState({ 'displayed': !this.state.displayed });
  };
  toggleFocused = () => {
    this.setState({ 'isFocused': !this.state.isFocused });
  };

  handleChange = (e) => {
    e.preventDefault();
    console.log('e', e);
  };

  render() {
    const hasNewClass = this.state.newMessages ? 'has-new-message' : 'nothing-new';
    const isVisible = this.state.displayed ? 'displayed' : 'hidden';
    const isFocused = this.state.isFocused ? 'isFocused' : 'not-focused';
    const list = (
      <li className={'conversation-item ' + hasNewClass + ' ' + isVisible + ' ' + isFocused}>
        <div className='top-title'>
          <i
            role='img'
            className='fa fa-comment-o column-header__icon fa-fw'
          />
          <span className='username'>
            {this.props.recipient.username}
          </span >
          {/*<Contact account={this.props.recipient} />*/}
          {this.props.newMessages > 0 && (
            <span className='new-message-counter'>
              ({this.props.newMessages})
            </span >
          )}
          <button
            className='btn btn-small'
            onClick={this.toggleVisibility}
          >
            <i
              role='img'
              className='fa fa-caret-down column-header__icon fa-fw'
            />
          </button >
        </div >
        <ConversationStream messages={this.props.messages} />
        <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'
              onFocusCapture={this.toggleFocused}
              onBlurCapture={this.toggleFocused}
              onChange={this.handleChange}

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

  }

}