import React, {Component, PropTypes} from 'react';

import unionBy from 'lodash/unionBy';

const MAX_SHOWING = 12;

export default class UserAvatarRow extends Component {

  render() {
    const {
      backers,
      members
    } = this.props;

    const all = unionBy(members, backers, 'username');
    const toShow = all.filter(u => u.avatar && u.avatar.indexOf('http') !== -1 ? true : false).slice(0, MAX_SHOWING-1);

    if (all.length === 0 || toShow.length === 0 ) {
      return (<div />);
    }
    return (
      <div className='UserAvatarRow'>
        <span className='UserAvatarRow-shots'>
          {toShow.map(u =>
            <span className='UserAvatarRow-avatar' key={u.username} style={{backgroundImage: `url(${u.avatar})`}} />)}
        </span>
        <span className='UserAvatarRowCount'> <a href='#contributors'> {`+${all.length - toShow.length}`} </a></span>
      </div>
    );
  }
}

UserAvatarRow.propTypes = {
  backers: PropTypes.array,
  members: PropTypes.array,
};
@@ -415,16 +415,65 @@
 ING-1);%0A
+    const plusCount = all.length - toShow.length;
 %0A    if 
@@ -803,24 +803,53 @@
     %3C/span%3E%0A
+        %7BplusCount != 0 &&%0A  
         %3Cspa
@@ -916,34 +916,17 @@
 %60+$%7B
-all.length - toShow.length
+plusCount
 %7D%60%7D 
@@ -933,24 +933,34 @@
 %3C/a%3E%3C/span%3E%0A
+        %7D%0A
       %3C/div%3E

don't show count if 0