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

import React from 'react'
import classnames from 'classnames'
import defineDebug from 'debug'
import ThreadLink from '../links/thread_link'
import TagLink from '../links/tag_link'
import PostReportButton from '../buttons/post_report_button'
import PostBanButton from '../buttons/post_ban_button'
import PostDestroyButton from '../buttons/post_destroy_button'
import { IconClasses } from 'ore-fol-enums'
import { asPure, asLocaled, asServed, combine } from '../../wrappers'

import PostStarButton from '../buttons/post_star_button'
import PostShareButton from '../buttons/post_share_button'
import PostBannedBlocker from '../blockers/post_banned_blocker'
import PostDeletedBlocker from '../blockers/post_deleted_blocker'
import { ApImage } from 'apeman-react-basic'

const { TAG_ICON } = IconClasses
const debug = defineDebug('project:fragment:post-panel')

/** @lends PostPanel */
const PostPanel = ({
  l,
  srvc,
  post,
  tagValues,
  starActive,
  starSpinning,
  onReport,
  onStar,
  onShare,
  bannable,
  onBan,
  destroyable,
  onDestroy,
  imageHeight = 320
}) => {
  const { userNameString, dateString } = srvc.localeService
  let { thread } = post
  let { locked } = thread
  return (
    <div className={ classnames('post-panel', {
      'post-panel-banned': post.banned,
      'post-panel-deleted': post.deleted
    }) }>
      {
        post.banned ? (
            <PostBannedBlocker { ...{ bannable, onBan, post } }/>
          ) : null
      }
      {
        post.deleted ? (
            <PostDeletedBlocker {... { post }} />
          ) : null
      }
      <PostPanel.Row className="post-panel-image-row"
                     style={ { height: imageHeight } }
      >
        {
          (post.banned || post.deleted) ? null : (
              <a className="post-panel-image-link"
                 href={ post.image }
                 target="_blank"
              >
                <ApImage src={ post.image }
                         height={ imageHeight }
                         width="100%"
                         scale="fit"
                />
              </a>
            )
        }
      </PostPanel.Row>

      <PostPanel.Row className="post-panel-meta-row">
      <span className='post-panel-date'>
        { dateString(post.createdAt) }
        </span>
        <span className='post-panel-thread'>
      <ThreadLink thread={ thread }
      />
      </span>
        <span className='post-panel-by'>
        { userNameString(post.submitter) }
        </span>
      </PostPanel.Row>
      <PostPanel.Row className="post-panel-text-row">
        { post.text }
      </PostPanel.Row>
      {
        tagValues.length > 0 ? (
            <PostPanel.Row className="post-panel-tag-row">
              <i className={ classnames('post-panel-row-icon', TAG_ICON) }/>
              {
                tagValues.map((tagValue) => (
                  <TagLink key={ tagValue }
                           value={ tagValue }
                           className='post-panel-tag'
                  />
                ))
              }
            </PostPanel.Row>
          ) : null
      }
      <PostPanel.Row className="post-panel-action-row">
        <PostReportButton post={ post }
                          onTap={ () => onReport(post) }
        />
        <PostStarButton post={ post }
                        active={ starActive }
                        spinning={ starSpinning }
                        onTap={ () => onStar(post) }
        />
        <PostShareButton post={ post }
                         onTap={ () => onShare(post) }
        />
        {
          !locked && bannable ? (
              <PostBanButton post={ post }
                             onTap={ () => onBan(post) }
              />
            ) : null
        }
        {
          !locked && destroyable ? (
              <PostDestroyButton post={ post }
                                 onTap={ () => onDestroy(post) }
              />
            ) : null
        }
      </PostPanel.Row>
    </div>
  )
}

Object.assign(PostPanel, {
  Row: ({ className, children }) => (
    <div className={ classnames('post-panel-row', className)}>
      { children }
    </div>
  )
})

export default combine(
  asPure(),
  asServed.proxy(),
  asLocaled.proxy()
)(PostPanel)