content: import css from './MessageSection.css';
  import MessageComposer from '../MessageComposer/MessageComposer.react';
  import MessageListItem from '../MessageListItem/MessageListItem.react.js';
  import messageStore from '../../stores/MessageStore';
  import React from 'react';
  import threadStore from '../../stores/ThreadStore';
  import userStore from '../../stores/UserStore';
  
  import ReactDOM from 'react-dom';
  
  function getStateFromStores() {
      return {
          messages: messageStore.getAllForCurrentThread(),
          thread: threadStore.getCurrent(),
          user: userStore.getProfile()
      };
  }
  
  function getMessageListItem(message) {
      return (
          <MessageListItem
              key={message.id}
              message={message}
          />
      );
  }
  
  class MessageSection extends React.Component {
  
      constructor(props) {
          super(props);
          this.state = getStateFromStores();
          this._scrollToBottom = this._scrollToBottom.bind(this);
          this._onChange = this._onChange.bind(this);
      }
  
      _scrollToBottom() {
          if (!this.refs.messageList || !this.refs.messageList.length ||
              this.refs.messageList.length === 0)
              return;
  
          let ul = ReactDOM.findDOMNode(this.refs.messageList);
          ul.scrollTop = ul.scrollHeight;
      }
  
      _onChange() {
          //let data = getStateFromStores();
          //console.log('messsageSection>>>> get new message >>>> ', data)
          this.setState(getStateFromStores());
      }
  
      componentDidMount() {
          this._scrollToBottom();
          messageStore.addChangeListener(this._onChange);
          threadStore.addChangeListener(this._onChange);
      };
  
      componentWillUnmount() {
          messageStore.removeChangeListener(this._onChange);
          threadStore.removeChangeListener(this._onChange);
      };
  
      componentDidUpdate() {
          this._scrollToBottom();
      }
  
      render() {
          let messageListItems = !this.state.messages ? <div></div> : this.state.messages.map(getMessageListItem);
          let threadID = this.state.thread ? this.state.thread.id : 0;
          let threadName = this.state.thread ? this.state.thread.name : '';
  
          return (
              <div className="message-section">
                  <h3 className="message-thread-heading">{threadName}</h3>
                  <ul className="message-list" ref="messageList">
                      {messageListItems}
                  </ul>
                  {this.state.thread && this.state.thread.typing ?
                      <li className="message-list-item">
                          <div className="message-time">
                              user typing
                          </div>
                      </li> : null}
                  <MessageComposer threadID={threadID} user={this.state.user}/>
              </div>
          );
      }
  
  }
  
  export default MessageSection;
  