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

import React from 'react'
import defineDebug from 'debug'
import classnames from 'classnames'
import { ApButton } from 'apeman-react-basic'
import CommentListItem from './comment_list_item'
import ReactCSSTransitionGroup from 'react/lib/ReactCSSTransitionGroup'
import { uniqueEntities } from 'ore-fol-helpers'
import AmazonAd from '../ad/amazon_ad'
import { asLocaled, combine } from '../../wrappers'

const debug = defineDebug('project:fragment:comment-list')

/** @lends CommentList */
const CommentList = ({
  l,
  heading,
  comments,
  simple = false,
  spinning = false,
  hasMore = false,
  moreSpinning,
  moreText,
  children,
  onMore,
  alt = ''
}) => (
  <div className={ classnames('comment-list-container', {
    'comment-list-container-simple': simple
  }) }>
    <div className="comment-list-main">
      {
        heading ? (
            <h3 className="comment-list-heading">{ heading }</h3>
          ) : null
      }
      {
        hasMore ? (
            <div className="comment-list-meta-row">
              <ApButton className="comment-list-more-button"
                        onTap={ () => onMore() }
                        spinning={ moreSpinning }
              >
                { moreText }
              </ApButton>
            </div>
          ) : null
      }
      <ReactCSSTransitionGroup
        component='ul'
        className={ classnames('comment-list', {
          'comment-list-spinning': spinning
        }) }
        transitionName="comment-list-animation"
        transitionEnterTimeout={ 500 }
        transitionLeaveTimeout={ 300 }>
        {
          (comments.length === 0) ? (
              <div className="comment-list-alt">{ alt }</div>
            ) : (
              uniqueEntities(comments).map((comment) => (
                <CommentListItem key={ comment.id }
                                 comment={ comment }
                                 simple={ simple }
                />
              ))
            )
        }
      </ReactCSSTransitionGroup>

      { children }
    </div>
    <div className="comment-list-aside">
      <fieldset className="ad-fieldset">
        <legend>{ l('headings.AD') }</legend>
        <AmazonAd size={ AmazonAd.sizes.foot }/>
      </fieldset>
    </div>
  </div>
)

export default combine(
  asLocaled.proxy()
)(CommentList)