import { Badge, List, Tag } from "antd";
import React from "react";
import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
import { setSelectedConversation } from "../../redux/messaging/messaging.actions";
import { selectSelectedConversation } from "../../redux/messaging/messaging.selectors";
import { TimeAgoFormatter } from "../../utils/DateFormatter";
import PhoneFormatter from "../../utils/PhoneFormatter";
import "./chat-conversation-list.styles.scss";
import OwnerNameDisplay from "../owner-name-display/owner-name-display.component";

const mapStateToProps = createStructuredSelector({
  selectedConversation: selectSelectedConversation,
});

const mapDispatchToProps = (dispatch) => ({
  setSelectedConversation: (conversationId) =>
    dispatch(setSelectedConversation(conversationId)),
});

export function ChatConversationListComponent({
  conversationList,
  selectedConversation,
  setSelectedConversation,
}) {
  return (
    <div className="chat-list-container">
      <List
        bordered
        dataSource={conversationList}
        renderItem={(item) => (
          <List.Item
            key={item.id}
            onClick={() => setSelectedConversation(item.id)}
            className={`chat-list-item ${
              item.id === selectedConversation
                ? "chat-list-selected-conversation"
                : null
            }`}
          >
            {item.job_conversations.length > 0 ? (
              <div className="chat-name">
                {item.job_conversations.map((j, idx) => (
                  <div key={idx}>
                    <OwnerNameDisplay ownerObject={j.job} />
                  </div>
                ))}
              </div>
            ) : (
              <PhoneFormatter>{item.phone_num}</PhoneFormatter>
            )}
            <div sryle={{ display: "inline-block" }}>
              <div>
                {item.job_conversations.length > 0
                  ? item.job_conversations.map((j, idx) => (
                      <Tag key={idx} className="ro-number-tag">
                        {j.job.ro_number}
                      </Tag>
                    ))
                  : null}
              </div>
              <TimeAgoFormatter>{item.updated_at}</TimeAgoFormatter>
            </div>
            <Badge count={item.messages_aggregate.aggregate.count || 0} />
          </List.Item>
        )}
      />
    </div>
  );
}
export default connect(
  mapStateToProps,
  mapDispatchToProps
)(ChatConversationListComponent);