import { Badge, List, Tag, Tooltip } from "antd";
import { AlertFilled } from "@ant-design/icons";
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 PhoneFormatter from "../../utils/PhoneFormatter";
import "./chat-conversation-list.styles.scss";
import { useTranslation } from "react-i18next";
import { TimeAgoFormatter } from "../../utils/DateFormatter";

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

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

export function ChatConversationListComponent({
  conversationList,
  selectedConversation,
  setSelectedConversation,
}) {
  const { t } = useTranslation();

  return (
    <div className="chat-list-container">
      <List
        bordered
        dataSource={conversationList}
        renderItem={(item) => (
          <List.Item
            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} style={{ display: "flex" }}>
                    {j.job.owner && !j.job.owner.allow_text_message && (
                      <Tooltip title={t("messaging.labels.noallowtxt")}>
                        <AlertFilled
                          className="production-alert"
                          style={{ marginRight: ".3rem", alignItems: "center" }}
                        />
                      </Tooltip>
                    )}
                    <div>{`${j.job.ownr_fn || ""} ${j.job.ownr_ln || ""} ${
                      j.job.ownr_co_nm || ""
                    } `}</div>
                  </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);