import React from "react";
import ScrumBoardLabelBar from "./ScrumBoardLabelBar";
import { Button, Icon, Avatar } from "@material-ui/core";
import { connect } from "react-redux";

const ScrumBoardCard = ({
  card,
  memberList = [], //all members
  labelList = []
}) => {
  let {
    title,
    members = [], //members in card
    labels = [],
    coverImage,
    attachments,
    comments
  } = card;

  let modifiedCardMemberList = members.map(boardMemberId =>
    memberList.find(member => member.id === boardMemberId)
  );
  let modifiedLabelList = labels.map(labelId =>
    labelList.find(label => label.id === labelId)
  );

  return (
    <div className="scrum-board-card">
      {coverImage && (
        <img className="border-radius-4" src={coverImage} alt="stair" />
      )}
      <div className="px-16 py-12">
        {modifiedLabelList.length !== 0 && (
          <div className="flex mb-12 font-weight-500">
            {modifiedLabelList.map(
              label =>
                label && (
                  <ScrumBoardLabelBar
                    key={label.id}
                    color={label.color}
                  ></ScrumBoardLabelBar>
                )
            )}
          </div>
        )}

        <h6 className="m-0 font-weight-500">{title}</h6>

        {(comments.length !== 0 ||
          attachments.length !== 0 ||
          members.length !== 0) && (
          <div className="flex flex-middle flex-space-between mt-12 button-group text-small">
            <div className="flex">
              {comments.length !== 0 && (
                <Button size="small">
                  <Icon className="mr-4 text-small" fontSize="small">
                    chat
                  </Icon>
                  <span>{comments.length}</span>
                </Button>
              )}
              {attachments.length !== 0 && (
                <Button size="small">
                  <Icon className="mr-4 text-small" fontSize="small">
                    attach_file
                  </Icon>
                  <span>{attachments.length}</span>
                </Button>
              )}
            </div>
            <div className="flex position-relative face-group">
              {modifiedCardMemberList.map(
                member =>
                  member && (
                    <Avatar
                      key={member.id}
                      className="avatar"
                      src={member.avatar}
                    />
                  )
              )}
              {/* <Avatar className="number-avatar avatar">+3</Avatar> */}
            </div>
          </div>
        )}
      </div>
    </div>
  );
};

const mapStateToProps = state => ({
  memberList: state.scrumboard.memberList,
  labelList: state.scrumboard.labelList
});

export default connect(
  mapStateToProps,
  {}
)(ScrumBoardCard);
