import React from 'react';
import PropTypes from 'prop-types';

import {Avatar, Button, SpaceListItem} from '@collab-ui/react';
import Timer from '@ciscospark/react-component-timer';
import {getTeamColor} from '@ciscospark/react-component-utils';

import './styles.scss';

const propTypes = {
  avatarUrl: PropTypes.string,
  callStartTime: PropTypes.number,
  hasCalling: PropTypes.bool,
  hasJoinedOnThisDevice: PropTypes.bool,
  id: PropTypes.string,
  isDecrypting: PropTypes.bool,
  isUnread: PropTypes.bool,
  name: PropTypes.string,
  onCallClick: PropTypes.func,
  onClick: PropTypes.func,
  teamColor: PropTypes.string,
  teamName: PropTypes.string,
  type: PropTypes.string
};

const defaultProps = {
  avatarUrl: '',
  callStartTime: undefined,
  hasCalling: false,
  hasJoinedOnThisDevice: undefined,
  id: '',
  isDecrypting: false,
  isUnread: false,
  name: '',
  onCallClick: () => {},
  onClick: () => {},
  teamColor: '',
  teamName: '',
  type: ''
};

function SpaceItem({
  avatarUrl,
  callStartTime,
  hasCalling,
  hasJoinedOnThisDevice,
  id,
  isUnread,
  name,
  onClick,
  onCallClick,
  teamName,
  teamColor,
  type,
  isDecrypting
}) {
  function handleClick() {
    return onClick(id);
  }

  function handleCallClick(e) {
    if (type === 'direct' || hasCalling) {
      e.stopPropagation();
      return onCallClick(id);
    }
    return false;
  }

  // Show hover call and join in progress buttons
  const hasCallSupport = hasCalling && typeof onCallClick === 'function';

  const avatarElement = (
    <Avatar
      backgroundColor={teamColor ? getTeamColor(teamColor, false) : '#E0E0E0'}
      isDecrypting={isDecrypting}
      src={avatarUrl}
      title={name}
      type={type === 'group' ? 'group' : ''}
    />
  );
  const subheaderElement = (
    <div style={{color: getTeamColor(teamColor, false)}}>{teamName}</div>
  );
  const joinButton = (
    hasCallSupport && callStartTime &&
    <Button
      ariaLabel="Join Call"
      callStartTime={callStartTime}
      color="green"
      size={28}
      onClick={handleCallClick}
    >
      {
      hasJoinedOnThisDevice
      ? <Timer startTime={callStartTime} />
        : <div>Now</div>
      }
    </Button>

  );

  return (
    <SpaceListItem
      childrenLeft={avatarElement}
      childrenRight={joinButton}
      header={name}
      isBold={!isDecrypting && isUnread}
      isDecrypting={isDecrypting}
      isUnread={!isDecrypting && isUnread}
      subheader={subheaderElement}
      onClick={handleClick}
    />
  );
}

SpaceItem.propTypes = propTypes;
SpaceItem.defaultProps = defaultProps;

export default SpaceItem;

@@ -184,16 +184,19 @@
 import %7B
+%0A  
 getTeamC
@@ -199,16 +199,164 @@
 eamColor
+,%0A  NOTIFICATIONS_BADGE_MENTION,%0A  NOTIFICATIONS_BADGE_MUTE,%0A  NOTIFICATIONS_BADGE_NONE,%0A  NOTIFICATIONS_BADGE_UNMUTE,%0A  NOTIFICATIONS_BADGE_UNREAD%0A
 %7D from '
@@ -468,16 +468,43 @@
 string,%0A
+  badge: PropTypes.string,%0A
   callSt
@@ -899,16 +899,51 @@
 rl: '',%0A
+  badge: NOTIFICATIONS_BADGE_NONE,%0A
   callSt
@@ -1198,16 +1198,16 @@
 eItem(%7B%0A
-
   avatar
@@ -1211,16 +1211,25 @@
 tarUrl,%0A
+  badge,%0A
   callSt
@@ -2597,75 +2597,250 @@
   is
-Decrypting=%7BisDecrypting%7D%0A      isUnread=%7B!isDecrypting && isUnread
+AlertOn=%7Bbadge === NOTIFICATIONS_BADGE_UNMUTE%7D%0A      isUnread=%7Bbadge === NOTIFICATIONS_BADGE_UNREAD%7D%0A      isMentioned=%7Bbadge === NOTIFICATIONS_BADGE_MENTION%7D%0A      isMuted=%7Bbadge === NOTIFICATIONS_BADGE_MUTE%7D%0A      isDecrypting=%7BisDecrypting
 %7D%0A  

Add notification level icon support (SPARK-38152)