import React from 'react';
import { connect } from 'react-redux';

import config from '../config'
import actions from '../actions';
import { classNames } from '../utillities';

class Messenger extends React.Component {

  sendMessage(attachment) {
    const message = this.messageInput.innerText;
    this.props.sendMessage(this.props.chatId, message, attachment);
    this.messageInput.innerText = '';
  }

  onKeyDown(event) {
    event.persist();

    // Send message on 'return' key press
    if ( event.keyCode === 13 && !event.shiftKey ) {
      event.preventDefault();
      this.sendMessage();
    } else {
      //this.props.onSizeChanged(50);
      //let height = event.target.scrollHeight;
      //this.props.onSizeChanged(height);
    }
  }

  addAttachment(event) {
    this.sendMessage(event.target.files[0]);
    this.props.toggleAttachment();
  }

  render() {
    let inputHeight = { height: `${ this.props.messengerHeight }px` };

    return (
      <article className="c-messenger">

        <input type='file' id='messageImage' accept='image/*'
          onChange={this.addAttachment.bind(this)} />
        <label htmlFor='messageImage' className={ classNames('c-messenger__attachment', {'state-active': this.props.showAttachment}) }>
          <i className="icon-add-circle-outline"></i>
        </label>

        <textarea ref={ input => this.messageInput = input }
          style={ inputHeight }
          placeholder="Blah blah blah"
          onKeyDown={ this.onKeyDown.bind(this) }
        ></textarea>

        <button className="c-messenger__submit" onClick={ () => this.sendMessage() }>
          <i className="icon-send"></i>
        </button>
      </article>
    );
  }
}

const mapStateToProps = (state, ownProps) => state[config.stateName];

const mapDispatchToProps = (dispatch, ownProps) => {
  return {
    sendMessage: (chatId, message, attachment) => dispatch(actions.chats.sendMessage(chatId, message, attachment)),
  };
};

const MessengerConnect = connect(mapStateToProps, mapDispatchToProps)(Messenger);

export default MessengerConnect;

@@ -1015,24 +1015,48 @@
 put 
-type='file'
+className=%22u-hidden%22%0A              
  id=
-'
+%22
 mess
@@ -1067,17 +1067,59 @@
 mage
-'
+%22%0A               type=%22file%22%0A              
  accept=
 'ima
@@ -1118,18 +1118,21 @@
 ept=
-'
+%22
 image/*
-'%0A
+%22%0A   
     
@@ -1137,16 +1137,18 @@
         
+  
 onChange
@@ -1149,16 +1149,17 @@
 Change=%7B
+ 
 this.add
@@ -1179,17 +1179,26 @@
 nd(this)
-%7D
+ %7D%0A       
  /%3E%0A    

update messenger input