import { Badge, List, Tag } from "antd";
import React from "react";
import { connect } from "react-redux";
import {
  AutoSizer,
  CellMeasurer,
  CellMeasurerCache,
  List as VirtualizedList,
} from "react-virtualized";
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 "./chat-conversation-list.styles.scss";

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

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

function ChatConversationListComponent({
  conversationList,
  selectedConversation,
  setSelectedConversation,
  loadMoreConversations,
}) {
  const cache = new CellMeasurerCache({
    fixedWidth: true,
    defaultHeight: 60,
  });

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

    return (
      <CellMeasurer
        key={key}
        cache={cache}
        parent={parent}
        columnIndex={0}
        rowIndex={index}
      >
        <List.Item
          onClick={() => setSelectedConversation(item.id)}
          className={`chat-list-item ${
            item.id === selectedConversation
              ? "chat-list-selected-conversation"
              : null
          }`}
          style={style}
        >
          <div
            style={{
              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 style={{ 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>
      </CellMeasurer>
    );
  };

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

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