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

import React from 'react'
import classnames from 'classnames'
import defineDebug from 'debug'
import { withTouch } from 'apeman-react-basic'
import TagLink from '../links/tag_link'
import { asPure, asLocaled, asServed, combine } from '../../wrappers'
import { IconClasses } from 'ore-fol-enums'

import ThreadImage from '../images/thread_image'
import ThreadListItemStyle from '../styles/thread_list_item_style'
const debug = defineDebug('project:fragment:thread-list-item')
const { LOCK_ICON } = IconClasses

const {
  DISCLOSURE_ICON,
  TAG_ICON
} = IconClasses

const thumbnailSize = 192
const thumbnailTranslate = 8
const tagValues = (tags) => Object.keys(tags)
  .sort((v1, v2) => tags[ v2 ] - tags[ v1 ])
  .slice(0, 3)

/** @lends ThreadListItem */
const ThreadListItem = ({
  srvc,
  thread,
  onDetail
}) => {
  const { urlForPost } = srvc.urlService
  return (
    <li className='thread-list-item'
        id={ `thread-list-item-${thread.id}` }
        onClick={ () => onDetail(thread) }>
      <ThreadListItemStyle prefix={ `#thread-list-item-${thread.id}` }
                           color={ thread.color }
      />
      <span className="thread-list-item-inner">
      <ThreadListItem.Body href={ urlForPost(thread) }
                           title={ thread.name }
      >
        <span className="thread-list-item-row">
          <ThreadImage className='thread-list-item-image'
                       thread={ thread }
                       size={ thumbnailSize }
                       translate={ thumbnailTranslate }
          />
        </span>
        <span className="thread-list-item-row">
          <span className="thread-list-item-title">
            {
              thread.locked ? (
                  <i className={ classnames(LOCK_ICON, 'thread-list-item-title-icon') }/>
                ) : null
            }
            { thread.name }
            </span>
          <div className='thread-list-item-desc'>{ thread.description }</div>
        </span>
      </ThreadListItem.Body>
      <ThreadListItem.Footer tags={ tagValues(thread.tags) }/>
    </span>
      <span className="thread-list-item-disclosure">
      <i className={ DISCLOSURE_ICON }/>
    </span>
    </li>
  )
}

Object.assign(ThreadListItem, {
  Body: ({
    href,
    title,
    children
  }) => (
    <a href={ href }
       title={ title }
       className="thread-list-item-body"
       onClick={ (e) => e.preventDefault() }
    >{ children }</a>
  ),
  Footer: ({ tags }) => (
    <span className="thread-list-item-footer">
      {
        tags.length > 0 ? (
            <span className="thread-list-item-tags">
              <i className={ classnames('thread-list-item-icon', TAG_ICON) }/>
              {
                tags.map((tag) => (
                  <TagLink key={ tag }
                           value={ tag }
                           className='thread-list-item-tag'
                  />
                ))
              }
        </span>
          ) : null
      }
    </span>
  )
})

export default combine(
  asPure(),
  asLocaled.proxy(),
  asServed.proxy()
)(withTouch(ThreadListItem))