import React from 'react'
import styles from './styles.css'
import MessageListHeading from './MessageListHeading'
import MessageListBody from './MessageListBody'
import MessageListFooter from './MessageListFooter'

class MessageList extends React.Component {
  constructor() {
    super()
  }

  render() {
    let { title, messageList, messageBuffer, connectedUsername } = this.props
    let { backButtonOnClick, sendButtonOnClick, loadMoreMessage } = this.props
    
    return (
      <div className={ styles.messageList }>
        <MessageListHeading title={ title } backButtonOnClick={ backButtonOnClick }/>
        <MessageListBody 
          messageList={ messageList } 
          messageBuffer={ messageBuffer } 
          connectedUsername={ connectedUsername }
          loadMoreMessage={ loadMoreMessage }
        />
        <MessageListFooter sendButtonOnClick={ sendButtonOnClick } />
      </div>
    )
  }
}

export default MessageList