import React, { PropTypes } from 'react'
import TableViewCell from '../TableViewCell'
import HeadPortrait from '../HeadPortrait'
import Icon from '../Icon'
import styles from './index.css'

const propTypes = {
  className: PropTypes.string,
  senderName: PropTypes.string,
  senderPortrait: PropTypes.string,
  content: PropTypes.string,
  images: PropTypes.arrayOf(PropTypes.string),
  date: PropTypes.string,
  onHeartClick: PropTypes.func,
}

const defaultProps = {
  className: '',
  images: [],
}

const FriendCircleItem = ({
  className,
  senderName,
  senderPortrait,
  content,
  images,
  date,
  onHeartClick,
  ...other,
}) => {
  const imageContainers = images.map((image, index) =>
    <img key={index} src={image} />
  )

  return (
    <TableViewCell className={`${styles.tableView} ${className}`} hr {...other}>
      <HeadPortrait className={styles.headPortrait} image={senderPortrait} />
      <div className={styles.contentContainer}>
        <div className={styles.senderName}>{senderName}</div>
        <div className={styles.content}>{content}</div>
        {imageContainers}
        <div>
          <span className={styles.date}>{date}</span>
          <span className={styles.actions}>
            <Icon type="heart-o" onClick={onHeartClick} />
          </span>
        </div>
      </div>
    </TableViewCell>
  )
}

FriendCircleItem.propTypes = propTypes
FriendCircleItem.defaultProps = defaultProps

export default FriendCircleItem