import { ShrinkOutlined, InfoCircleOutlined } from "@ant-design/icons";
import { Col, Row, Tooltip, Typography } 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 ChatConversationListComponent from "../chat-conversation-list/chat-conversation-list.component";
import ChatConversationContainer from "../chat-conversation/chat-conversation.container";
import { selectSelectedConversation } from "../../redux/messaging/messaging.selectors";
import "./chat-popup.styles.scss";
import ChatNewConversation from "../chat-new-conversation/chat-new-conversation.component";

const mapStateToProps = createStructuredSelector({
  selectedConversation: selectSelectedConversation,
});
const mapDispatchToProps = (dispatch) => ({
  toggleChatVisible: () => dispatch(toggleChatVisible()),
});

export function ChatPopupComponent({
  conversationList,
  selectedConversation,
  toggleChatVisible,
}) {
  const { t } = useTranslation();
  return (
    <div className="chat-popup">
      <div style={{ display: "flex", alignItems: "center" }}>
        <Typography.Title level={4}>
          {t("messaging.labels.messaging")}
        </Typography.Title>
        <ChatNewConversation />
        <Tooltip title={t("messaging.labels.recentonly")}>
          <InfoCircleOutlined />
        </Tooltip>
      </div>
      <ShrinkOutlined
        onClick={() => toggleChatVisible()}
        style={{ position: "absolute", right: ".5rem", top: ".5rem" }}
      />

      <Row gutter={[8, 8]} className="chat-popup-content">
        <Col span={8}>
          <ChatConversationListComponent conversationList={conversationList} />
        </Col>
        <Col span={16}>
          {selectedConversation ? <ChatConversationContainer /> : null}
        </Col>
      </Row>
    </div>
  );
}
export default connect(mapStateToProps, mapDispatchToProps)(ChatPopupComponent);