state = {
    messages:[],
    messagesRef : firebase.database().ref("messages"),
    messagesLoading:true
  }

  componentDidMount(){
    const {chatRoom} = this.props;

    if(chatRoom){
      this.addMessageListeners(chatRoom.id)
    }
  }

  addMessageListeners = (chatRoomId) => {
    let messagesArray = [];
    this.state.messagesRef.child(chatRoomId).on("child_added",DataSnapshot=>{
      messagesArray.push(DataSnapshot.val());
      this.setState({messages:messagesArray,messagesLoading:false})
    })
  }

  renderMessages = (messages) =>
    messages.length>0&&
    messages.map(message=>(
      <Message
        key={message.timestamp}
        message={message}
        user={this.props.user}
      />
    ))

  render() {
    const {messages} = this.state;
    return (
      <div style={{padding:'2rem 2rem 0 2rem'}}>
        <MessageHeader/>
        <div style={{
          width:'100%',
          height:'450px',
          border:'.2rem solid #ececec',
          borderRadius:'4px',
          padding:'1rem',
          marginBottom:'1rem',
          overflowY:'auto',
        }}>
          {this.renderMessages(messages)}
        </div>

        <MessageForm/>
      </div>
    )
  }
}

const mapStateToProps = state =>{
  return{
    user: state.user.currentUser,
    chatRoom: state.chatRoom.currentChatRoom
  }
}

export default connect(mapStateToProps)(MainPanel);