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

import React, { Component, PropTypes as types } from 'react'
import defineDebug from 'debug'
import {
  ApView, ApViewHeader, ApViewBody, ApViewFooter
} from 'apeman-react-basic'
import {
  asConnected,
  asLocaled,
  asView,
  forList,
  asServed,
  forOne,
  forSpin,
  forAuth,
  forEvent,
  ofPost,
  combine
} from '../../wrappers'
import { PostCard, CommentList, PostDetailStyle } from '../../fragments'

import { IconClasses, ViewEvents } from 'ore-fol-enums'
import { CommentCreateView } from '../../views'

const debug = defineDebug('project:view:comment-list')
const { COMMENTS_ICON } = IconClasses
const { COMMENT_CREATE_EVENT } = ViewEvents

/** @lends PostCommentsView */
class PostCommentsView extends Component {
  // --------------------
  // Specs
  // --------------------
  static get propTypes () {
    return {}
  }

  static get defaultProps () {
    return {
      limit: 50
    }
  }

  render () {
    const s = this
    let {
      props,
      l
    } = s
    let {
      post,
      comments
    } = props
    return (
      <ApView id='comment-list-view'
              className='view'
              spinning={ props.spinning }
              way={ props.way }
      >
        <ApViewHeader onLeftTap={ s.handlePop }
                      leftText={ null }
                      leftIcon={ props.popIcon }
                      titleText={ l('titles.POST_COMMENTS') }
                      titleIcon={ COMMENTS_ICON }
                      onRightTap={ null }
                      rightIcon={ null }
                      rightText={ null }
        />

        <ApViewBody>
          {
            post ? (
                <div className="hidden-on-embed-view card-wrap">
                  <PostCard post={ post }/>
                </div>
              ) : null
          }
          {
            post && comments ? (
                <div id={ `post-comments-${post.id}` }
                     className="post-comments"
                >
                  <PostDetailStyle prefix={ `#post-comments-${post.id}` }
                                   color={ post.thread.color }
                  />
                  <CommentList comments={ comments.entities }
                               hasMore={ comments.more }
                               moreText={ l('buttons.SHOW_OLDER_COMMENT') }
                               onMore={ s.handleMore }
                               moreSpinning={ props.moreSpinning }
                               alt={ l('alt.NO_COMMENT_FOUND') }
                  >
                    <div className="embed-view-container">
                      <CommentCreateView { ...props } />
                    </div>
                  </CommentList>
                </div>
              ) : (
                <div className="comment-list-loading">
                  { l('messages.NOW_LOADING') }
                </div>
              )
          }
        </ApViewBody>
      </ApView>
    )
  }

  // --------------------
  // Lifecycle
  // --------------------

  componentWillMount () {
    debug('willMount')
    const s = this
  }

  componentDidMount () {
    debug('didMount')
    const s = this
    const { props } = s

    let { postId } = props
    s.loadComments(postId)

    s.listenEvent(COMMENT_CREATE_EVENT, s.reloadComments)
  }

  componentWillUnmount () {
    debug('willUnmount')
    const s = this
  }

  // --------------------
  // Handlers
  // --------------------

  handleMore () {
    const s = this
    const { props } = s
    let { postId, comments } = props
    let { next: offset } = comments.counts
    s.loadMoreComments(postId, { offset })
  }

  // --------------------
  // Custom
  // --------------------

  loadComments (postId) {
    const s = this
    const { use } = s.service('apiService')
    let { limit } = s.props
    return use('commentApi').then((commentApi) =>
      s.applySpinWhile(() =>
        s.applyListLoad({
          comments: () => commentApi.listForPost(postId, { limit })
        })
      )
    )
  }

  loadMoreComments (postId, { offset }) {
    const s = this
    const { use } = s.service('apiService')
    let { limit } = s.props
    return use('commentApi').then((commentApi) =>
      s.applySpinWhile({
        moreSpinning: () =>
          s.applyListMore({
            comments: () => commentApi.listForPost(postId, { limit, offset })
          })

      })
    )
  }

  reloadComments () {
    const s = this
    let { postId } = s.props
    return s.loadComments(postId)
  }
}

export default combine(
  asServed(),
  forSpin(),
  forList(),
  forOne(),
  forAuth(),
  forEvent(),
  ofPost(),
  asLocaled(),
  asView(),
  asConnected(() => ({}))
)(PostCommentsView)