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

import React from 'react'
import defineDebug from 'debug'
import { asPure, asLocaled, combine } from '../../wrappers'
import { ApImage, withTouch } from 'apeman-react-basic'
import EllipsisButton from '../buttons/ellipsis_button'
import PostStarButton from '../buttons/post_star_button'
import PostCommentsButton from '../buttons/post_comments_button'
import PostThreadButton from '../buttons/post_thread_button'
import ThreadTip from '../tips/thread_tip'
import PostBannedBlocker from '../blockers/post_banned_blocker'
import { IconClasses } from 'ore-fol-enums'
import classnames from 'classnames'
const { REPORT_ICON, SHARE_ICON, BAN_ICON, DESTROY_ICON, TAG_ICON } = IconClasses
const debug = defineDebug('project:fragment:post-list-item')

/** @lends PostListItem */
const PostListItem = ({
  l,
  post,
  onDetail,
  starActive = false,
  starSpinning = false,
  ellipsesOpen = false,
  tipOpen = false,
  simple = false,
  bannable = false,
  destroyable = false,
  banSpinning = false,
  banned = false,
  onStar,
  onTip,
  onBan,
  onComments,
  onDestroy,
  onEllipses,
  onReport,
  onTag,
  onShare
}) => (
  <li className={ classnames('post-list-item', {
    'post-list-item-banned': banned
  }) }>
    <span className='post-list-item-inner'
    >
        <PostListItem.Body post={ post }
                           onTap={ () => onDetail(post) }
        />
      {
        simple ? null : (
            <PostListItem.Footer { ...{
              l,
              post,
              starActive,
              starSpinning,
              ellipsesOpen,
              bannable,
              banned,
              banSpinning,
              destroyable,
              tipOpen
            } }
                                 onTip={ () => onTip(post) }
                                 onStar={ () => onStar(post) }
                                 onComments={ () => onComments(post) }
                                 onEllipses={ () => onEllipses(post) }
                                 onReport={ () => onReport(post) }
                                 onTag={ () => onTag(post) }
                                 onShare={ () => onShare(post) }
                                 onBan={ () => onBan(post) }
                                 onDestroy={ () => onDestroy(post) }
            />
          )
      }
      {
        !banned && tipOpen ? (
            <ThreadTip threadId={ post.threadId }/>
          ) : null
      }
      {
        banned ? (
            <PostBannedBlocker { ...{ bannable, onBan, post } }/>
          ) : null
      }
    </span>
  </li>
)

Object.assign(PostListItem, {
  Body: withTouch(
    ({ post }) => (
      <span className="post-list-item-body">
        <PostListItem.Row className="post-list-item-image-row">
          <ApImage className='post-list-item-image'
                   src={ post.image }
                   alt={ post.imageAlt }
                   width='100%'
                   height={ 184 }
                   scale="fill"
          />
        </PostListItem.Row>
        <PostListItem.Row>
          {
            post.text ? (
                <span className="post-list-item-desc">
                { post.text }
              </span>
              ) : null
          }
        </PostListItem.Row>
      </span>
    )
  ),
  Footer: ({
    l,
    post,
    starActive,
    starSpinning,
    bannable,
    banned,
    destroyable,
    banSpinning,
    tipOpen,
    onTip,
    onStar,
    onShare,
    onBan,
    onComments,
    ellipsesOpen,
    onEllipses,
    onReport,
    onTag,
    onDestroy
  }) => (
    <span className="post-list-item-footer">
      <PostListItem.Row className="post-list-item-button-row">
        <div className="post-list-item-button-col">
          <PostThreadButton post={ post }
                            active={ tipOpen }
                            onTap={ onTip }
          />
          <PostStarButton post={ post }
                          active={ starActive }
                          spinning={ starSpinning }
                          onTap={ onStar }
          />
          <PostCommentsButton post={ post }
                              onTap={ onComments }
          />
        </div>
        <div className="post-list-item-button-col">
          <EllipsisButton open={ ellipsesOpen }
                          handlers={ {
                            share: onShare,
                            tag: onTag,
                            report: onReport,
                            ban: bannable && onBan,
                            destroy: destroyable && onDestroy
                          } }
                          labels={ {
                            share: l('buttons.SHOW_SHARE'),
                            tag: l('buttons.SHOW_TAG'),
                            report: l('buttons.SHOW_REPORT'),
                            ban: banned ? l('buttons.SHOW_UNBAN') : l('buttons.SHOW_BAN'),
                            destroy: l('buttons.SHOW_POST_DESTROY')
                          } }
                          icons={ {
                            share: SHARE_ICON,
                            report: REPORT_ICON,
                            tag: TAG_ICON,
                            ban: BAN_ICON,
                            destroy: DESTROY_ICON
                          } }
                          onTap={ () => onEllipses({ post }) }
          />
        </div>
        </PostListItem.Row>
    </span>
  ),
  Row: ({ children, className }) => (
    <span className={ classnames('post-list-item-row', className) }>
      { children }
    </span>
  )
})

export default combine(
  asPure(),
  asLocaled.proxy()
)(PostListItem)