import { connect } from 'react-redux'

import ConversationPanel from './ConversationPanel'

import * as AvatarSelectors from '../../../modules/avatar/selectors'
import * as EnrichmentSelectors from '../../../modules/enrichment/selectors'
import { getEndUserById, endUsersLoading } from '../../../modules/endUsers/selectors'
import { getUnreadMessagesForConversationId } from '../../../modules/conversations/selectors'

import { IConversationPanelContainerProps, IConversationPanelContainerMapStateToProps } from './interfaces'

const makeMapStateToProps = (state: any, props: any) => {
  const avatarUrl = AvatarSelectors.makeAvatarUrl()
  const avatarStatus = AvatarSelectors.makeAvatarStatus()
  const profile = EnrichmentSelectors.makeProfile()
  const endUser = getEndUserById(props.conversation.endUserId)(state)
  const email = endUser && endUser.email
  const unreadMessagesByConversationId = getUnreadMessagesForConversationId(props.conversation.id)(state)
  
  return {
    endUser,
    unreadMessagesByConversationId,
    endUsersLoading: endUsersLoading(state),
    profile: email && profile(state, { email }),
    avatarUrl: email && avatarUrl(state, { email }),
    avatarStatus: email && avatarStatus(state, { email }),
  }
}


export default connect<IConversationPanelContainerMapStateToProps, null, IConversationPanelContainerProps>(makeMapStateToProps)(ConversationPanel)