import * as React from 'react'
import * as cx from 'classnames'

import { Props } from './ActivityGroupInterface'
import Activity from '../Activity'
import { humanizeDate } from '../../../utils/humanize'

import Avatar from '../../Avatar'

const ActivityGroup = (props: Props): JSX.Element => {
  const { activityGroup, avatarUrl, avatarStatus } = props
  return (
    <div>
      {props.activityGroup.firstOfDate && (
        <div className="popup-feed-day-divider">
          {humanizeDate(props.activityGroup.at)}
        </div>
      )}
      <div className={cx('popup-feed-activity-group', { unseen: props.activityGroup.unseen })}>
        <div style={{ width: '40px', height: '40px', marginRight: '24px' }}>
          <Avatar
            email={activityGroup.email}
            avatarUrl={avatarUrl}
            avatarStatus={avatarStatus} />
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', flex: 1, width: '0px' }}>
          {props.activityGroup.activities.map((activity, i) => (
            <Activity key={activity.id} activity={activity} profile={props.profile} isFirstInGroup={i === 0} />
          ))}
        </div>
      </div>
    </div>
  )
}

export default ActivityGroup