import { Affix, Badge } from "antd";
import React from "react";
import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
import { toggleChatVisible } from "../../redux/messaging/messaging.actions";
import {
  selectChatVisible,
  selectConversations
} from "../../redux/messaging/messaging.selectors";
import ChatConversationContainer from "../chat-conversation/chat-conversation.container";
import ChatOverlayComponent from "./chat-overlay.component";

const mapStateToProps = createStructuredSelector({
  chatVisible: selectChatVisible,
  conversations: selectConversations
});

const mapDispatchToProps = dispatch => ({
  toggleChatVisible: () => dispatch(toggleChatVisible())
});
export default connect(
  mapStateToProps,
  mapDispatchToProps
)(function ChatWindowContainer({
  chatVisible,
  toggleChatVisible,
  conversations
}) {
  return (
    <Affix offsetBottom={0}>
      <div>
        <Badge count={10}>
          <ChatOverlayComponent
            chatVisible={chatVisible}
            toggleChatVisible={toggleChatVisible}
          />
        </Badge>
        {conversations
          ? conversations.map((conversation, idx) => (
              <Badge key={idx} count={5}>
                <ChatConversationContainer conversation={conversation} />
              </Badge>
            ))
          : null}
      </div>
    </Affix>
  );
});
