import React from 'react'
import A from '../components/A'
import Dropdown from '../components/Dropdown'
import Masonry from 'react-masonry-component'
import { humanDate } from '../util/text'
import { isEmpty } from 'lodash'

const PersonCards = ({ people, slug, onSkillClick, removeMember }) => {
  return <div className='person-cards masonry-container'>
    <Masonry options={{transitionDuration: 0}}>
      {people.map(person => <div key={person.id} className='masonry-item-wrapper'>
        <PersonCard person={person}
          slug={slug}
          onSkillClick={onSkillClick}
          removeMember={removeMember}
          />
      </div>)}
    </Masonry>
  </div>
}

export default PersonCards

export const PersonCard = ({ person, slug, onSkillClick, removeMember }) => {
  const {
    id, avatar_url, name, bio, isModerator, joined_at, tags, offerCount
  } = person

  const offersText = Number(offerCount) > 0
  ? `•${offerCount} offer${Number(offerCount) > 1 ? 's' : ''}`
  : null

  const avatarStyle = {backgroundImage: `url(${avatar_url})`}

  return <div className='person-card'>
    {removeMember && <Dropdown className='person-menu' alignRight
      toggleChildren={<i className='icon-More'></i>}>
      {[<li key='1'><a onClick={() => removeMember(person.id)}>Remove from community</a></li>]}
    </Dropdown>}
    <A to={`/u/${person.id}`} className='square-avatar' style={avatarStyle}/>
    <div className='person-body'>
      <A className='name' to={`/u/${id}`}>{name}</A>
      <div className='role'>
        {(isModerator ? 'Moderator' : 'Member')} since {humanDate(joined_at)}
      </div>
      {bio && <div className='details'>{bio}</div>}
      {offersText && <div className='offerCount'>{offersText}</div>}
      {!isEmpty(tags) && tags.map(tag =>
        <span key={tag}>
          <a className='hashtag' onClick={() => onSkillClick(tag)}>
            #{tag}
          </a>
          &nbsp;<wbr/>
        </span>)}
    </div>
  </div>
}

@@ -78,29 +78,61 @@
 m '.
-./components/Dropdown
+/Dropdown'%0Aimport %7B handleMouseOver %7D from './Popover
 '%0Aim
@@ -790,32 +790,46 @@
 k, removeMember 
+%7D, %7B dispatch 
 %7D) =%3E %7B%0A  const 
@@ -1372,16 +1372,62 @@
 n%3E%7D%0A    
+%3Cspan onMouseOver=%7BhandleMouseOver(dispatch)%7D%3E
 %3CA to=%7B%60
@@ -1491,16 +1491,23 @@
 Style%7D/%3E
+%3C/span%3E
 %0A    %3Cdi
@@ -1539,16 +1539,62 @@
 %3E%0A      
+%3Cspan onMouseOver=%7BhandleMouseOver(dispatch)%7D%3E
 %3CA class
@@ -1631,16 +1631,23 @@
 ame%7D%3C/A%3E
+%3C/span%3E
 %0A      %3C
@@ -2099,20 +2099,79 @@
   %3C/div%3E%0A  %3C/div%3E%0A%7D%0A
+PersonCard.contextTypes = %7Bdispatch: React.PropTypes.func%7D%0A

add popover to person cards