import { MessageOutlined } from "@ant-design/icons";
import { Badge, Card } from "antd";
import React from "react";
import { useTranslation } from "react-i18next";
import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
import { toggleChatVisible } from "../../redux/messaging/messaging.actions";
import { selectChatVisible } from "../../redux/messaging/messaging.selectors";
import ChatPopupComponent from '../chat-popup/chat-popup.component'

const mapStateToProps = createStructuredSelector({
  chatVisible: selectChatVisible,
});
const mapDispatchToProps = (dispatch) => ({
  toggleChatVisible: () => dispatch(toggleChatVisible()),
});

export function ChatAffixComponent({
  chatVisible,
  toggleChatVisible,
  conversationList,
  unreadCount,
}) {
  const { t } = useTranslation();

  return (
    <Badge count={unreadCount}>
      <Card size='small'>
        {chatVisible ? (
          <ChatPopupComponent conversationList={conversationList} />
        ) : (
          <div
            onClick={() => toggleChatVisible()}
            style={{ cursor: "pointer" }}>
            <MessageOutlined />
            <strong>{t("messaging.labels.messaging")}</strong>
          </div>
        )}
      </Card>
    </Badge>
  );
}
export default connect(mapStateToProps, mapDispatchToProps)(ChatAffixComponent);