/**
 * ThreadImage component
 *
 * Generated by coz on 2016-12-31,
 * from a template provided by apeman-asset-templates.
 *
 * @function ThreadImage
 */
'use strict'

import React from 'react'
import classnames from 'classnames'
import defineDebug from 'debug'
import { mergeQueryString } from 'ore-fol-helpers'
import { ApImage } from 'apeman-react-basic'
import { asPure } from '../../wrappers'
import { uniqueEntities } from 'ore-fol-helpers'
const debug = defineDebug('project:fragment:thread-image')

/** @lends ThreadImage */
const ThreadImage = ({
  thread,
  size = 64,
  count = 5,
  className
}) => {
  let posts = uniqueEntities(thread.posts)
    .filter((post) => !post.delelted && !post.banned && !!post.image)
    .slice(0, count)
  return (
    <span className={ classnames('thread-image', {
      'thread-image-empty': posts.length === 0
    }, className) }
          style={ { minHeight: size, minWidth: size / 2 } }
    >
      {
        posts.map((post, i) => (
          <ThreadImage.Item key={ post.id }
                            post={ post }
                            size={ size }
          />
        ))
      }
  </span>
  )
}

Object.assign(ThreadImage, {
  Item ({ post, size }) {
    return (
      <span key={ post.id }
            className='thread-image-item'
      >
          <ApImage src={ mergeQueryString(post.image, {
            'resize-w': size * 3
          }) }
                   height={ size }
                   width={ size }
                   scale='fill'
          />
        </span>
    )
  }
})

export default asPure()(ThreadImage)