import React from 'react'
import styles from './styles.css'
import ConversationListHeading from './ConversationListHeading'
import ConversationListBody from './ConversationListBody'
import ConversationListFooter from './ConversationListFooter'

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

  render() {
    let { connectedUser, conversationList, hasMoreConversation, lastScrollTop } = this.props
    let { conversationEntryOnClick, loadMoreConversation } = this.props

    return (
      <div className={ styles.conversationList }>
        <ConversationListHeading connectedUser={ connectedUser } />
        <ConversationListBody 
          conversationList={ conversationList }
          hasMoreConversation={ hasMoreConversation }
          lastScrollTop={ lastScrollTop }
          loadMoreConversation={ loadMoreConversation }
          conversationEntryOnClick={ conversationEntryOnClick }
        />
        <ConversationListFooter 
          hasMoreConversation={ hasMoreConversation } 
          loadMoreButtonOnClick={ loadMoreConversation }/>
      </div>
    )
  }
}

export default ConversationList