import { Badge, Card, List, Space, 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 { OwnerNameDisplayFunction } from "../owner-name-display/owner-name-display.component";
import _ from "lodash";
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];
    const cardContentRight = <TimeAgoFormatter>{item.updated_at}</TimeAgoFormatter>;
    const cardContentLeft =
      item.job_conversations.length > 0
        ? item.job_conversations.map((j, idx) => <Tag key={idx}>{j.job.ro_number}</Tag>)
        : null;

    const names = <>{_.uniq(item.job_conversations.map((j, idx) => OwnerNameDisplayFunction(j.job)))}</>;

    const cardTitle = (
      <>
        {item.label && <Tag color="blue">{item.label}</Tag>}
        {item.job_conversations.length > 0 ? (
          <Space direction="vertical">{names}</Space>
        ) : (
          <Space>
            <PhoneFormatter>{item.phone_num}</PhoneFormatter>
          </Space>
        )}
      </>
    );
    const cardExtra = <Badge count={item.messages_aggregate.aggregate.count || 0} />;

    const getCardStyle = () =>
      item.id === selectedConversation
        ? { backgroundColor: "rgba(128, 128, 128, 0.2)" }
        : { backgroundColor: index % 2 === 0 ? "#f0f2f5" : "#ffffff" };

    return (
      <CellMeasurer key={key} cache={cache} parent={parent} columnIndex={0} rowIndex={index}>
        <List.Item
          onClick={() => setSelectedConversation(item.id)}
          style={style}
          className={`chat-list-item
    ${item.id === selectedConversation ? "chat-list-selected-conversation" : null}`}
        >
          <Card style={getCardStyle()} bordered={false} size="small" extra={cardExtra} title={cardTitle}>
            <div style={{ display: "inline-block", width: "70%", textAlign: "left" }}>{cardContentLeft}</div>
            <div style={{ display: "inline-block", width: "30%", textAlign: "right" }}>{cardContentRight}</div>
          </Card>
        </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);