import { connect } from 'react-redux'
import { bindActionCreators } from 'redux'

import Header from './Header'
import * as PopupActions from '../../modules/popup/actions'
import * as AuthSelectors from '../../modules/auth/selectors'
import * as PopupSelectors from '../../modules/popup/selectors'
import * as GatesSelectors from '../../modules/gates/selectors'
import * as ConversationsSelectors from '../../modules/conversations/selectors'

import { HeaderContainerStateToProps, HeaderContainerDispatchProps, HeaderContainerProps } from './interfaces'

const mapStateToProps = (state: any) => ({
  user: AuthSelectors.user(state),
  searchQuery: PopupSelectors.searchQuery(state),
  searchFocused: PopupSelectors.searchFocused(state),
  hasNewUnreadConvos: GatesSelectors.hasNewUnreadConvos(state),
  conversationIconStatus: ConversationsSelectors.conversationIconStatus(state),
  conversations: ConversationsSelectors.openAndPendingConversations(state),
})

const mapDispatchToProps = (dispatch: any) => ({
  actions: bindActionCreators(
    {
      updateSearchQuery: PopupActions.updateSearchQuery,
      searchFocused: PopupActions.searchFocused,
    },
    dispatch,
  ),
})

export default connect<HeaderContainerStateToProps, HeaderContainerDispatchProps, HeaderContainerProps>(mapStateToProps, mapDispatchToProps)(Header)