import { Badge, List, Tag } from "antd";
import React, { useEffect } 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 OwnerNameDisplay from "../owner-name-display/owner-name-display.component";
import { List as VirtualizedList, AutoSizer } from "react-virtualized";

import "./chat-conversation-list.styles.scss";

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

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

function ChatConversationListComponent({
  conversationList,
  selectedConversation,
  setSelectedConversation,
  subscribeToMoreConversations,
  loadMoreConversations,
}) {
  useEffect(
    () => subscribeToMoreConversations(),
    // eslint-disable-next-line react-hooks/exhaustive-deps
    []
  );

  const rowRenderer = ({ index, key, style }) => {
    const item = conversationList[index];

    return (
      <List.Item
        key={key}
        onClick={() => setSelectedConversation(item.id)}
        className={`chat-list-item ${
          item.id === selectedConversation
            ? "chat-list-selected-conversation"
            : null
        }`}
        style={style}
      >
        <div sryle={{ display: "inline-block" }}>
          {item.label && <div className="chat-name">{item.label}</div>}
          {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>
        <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>
    );
  };

  return (
    <div className="chat-list-container">
      <AutoSizer>
        {({ height, width }) => (
          <VirtualizedList
            height={height}
            width={width}
            rowCount={conversationList.length}
            rowHeight={60}
            rowRenderer={rowRenderer}
            onScroll={({ scrollTop, scrollHeight, clientHeight }) => {
              if (scrollTop + clientHeight === scrollHeight) {
                loadMoreConversations();
              }
            }}
          />
        )}
      </AutoSizer>
    </div>
  );
}

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(ChatConversationListComponent);