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

import SpaceItem from '@ciscospark/react-component-space-item';

const propTypes = {
  activeSpaceId: PropTypes.string,
  currentUser: PropTypes.shape({
    id: PropTypes.string.isRequired
  }).isRequired,
  hasCalling: PropTypes.bool,
  onCallClick: PropTypes.func,
  onClick: PropTypes.func,
  spaces: PropTypes.oneOfType([
    PropTypes.arrayOf(
      PropTypes.shape({
        avatarUrl: PropTypes.string,
        activityText: PropTypes.oneOfType([
          PropTypes.string,
          PropTypes.element
        ]),
        callStartTime: PropTypes.number,
        id: PropTypes.string,
        isDecrypting: PropTypes.bool,
        isUnread: PropTypes.bool,
        lastActivityTime: PropTypes.string,
        name: PropTypes.string,
        teamColor: PropTypes.string,
        teamName: PropTypes.string,
        type: PropTypes.string
      })
    ),
    // Can accept an object that can iterated with `forEach`
    PropTypes.object
  ])
};

const defaultProps = {
  activeSpaceId: '',
  hasCalling: false,
  onCallClick: () => {},
  onClick: () => {},
  spaces: []
};

export default function SpacesList({
  activeSpaceId,
  currentUser,
  hasCalling,
  onCallClick,
  onClick,
  spaces
}) {
  const recents = [];
  spaces.forEach((space) => recents.push(<SpaceItem
    active={space.id === activeSpaceId}
    currentUser={currentUser}
    hasCalling={hasCalling}
    key={space.id}
    onCallClick={onCallClick}
    onClick={onClick}
    {...space}
  />));

  return (
    <div className={classNames('ciscospark-spaces-list')}>
      {recents}
    </div>
  );
}

SpacesList.propTypes = propTypes;
SpacesList.defaultProps = defaultProps;

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

import SpaceItem from '@ciscospark/react-component-space-item';

const propTypes = {
  activeSpaceId: PropTypes.string,
  hasCalling: PropTypes.bool,
  onCallClick: PropTypes.func,
  onClick: PropTypes.func,
  spaces: PropTypes.oneOfType([
    PropTypes.arrayOf(
      PropTypes.shape({
        avatarUrl: PropTypes.string,
        activityText: PropTypes.oneOfType([
          PropTypes.string,
          PropTypes.element
        ]),
        callStartTime: PropTypes.number,
        id: PropTypes.string,
        isDecrypting: PropTypes.bool,
        isUnread: PropTypes.bool,
        lastActivityTime: PropTypes.string,
        name: PropTypes.string,
        teamColor: PropTypes.string,
        teamName: PropTypes.string,
        type: PropTypes.string
      })
    ),
    // Can accept an object that can iterated with `forEach`
    PropTypes.object
  ])
};

const defaultProps = {
  activeSpaceId: '',
  hasCalling: false,
  onCallClick: () => {},
  onClick: () => {},
  spaces: []
};

export default function SpacesList({
  activeSpaceId,
  hasCalling,
  onCallClick,
  onClick,
  spaces
}) {
  const recents = [];
  spaces.forEach((space) => recents.push(<SpaceItem
    active={space.id === activeSpaceId}
    hasCalling={hasCalling}
    key={space.id}
    onCallClick={onCallClick}
    onClick={onClick}
    {...space}
  />));

  return (
    <div className={classNames('ciscospark-spaces-list')}>
      {recents}
    </div>
  );
}

SpacesList.propTypes = propTypes;
SpacesList.defaultProps = defaultProps;

remove unused currentUser prop