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

import React, { Component, PropTypes as types } from 'react'
import defineDebug from 'debug'
import {
  ApView, ApViewHeader, ApViewBody, ApViewFooter,
  ApContainer,
  ApSection, ApSectionHeader, ApSectionBody
} from 'apeman-react-basic'
import {
  asConnected,
  asLocaled,
  asView,
  forSpin,
  asServed,
  forOne,
  forAuth,
  forStarrable,
  forReportable,
  forCanonical,
  forTwitter,
  forOgp,
  forEvent,
  ofPost,
  combine
} from '../../wrappers'

import { IconClasses, ViewEvents } from 'ore-fol-enums'
import { PostCommentsView } from '../../views'
import { PostPanel, PostDetailStyle } from '../../fragments'
const { POST_ICON } = IconClasses
const { POST_DESTROY_EVENT, POST_BAN_EVENT, POST_UNBAN_EVENT } = ViewEvents
const debug = defineDebug('project:view:post-detail')

const tagValues = (tags) => Object.keys(tags || {})
  .sort((v1, v2) => tags[ v2 ] - tags[ v1 ])

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

  static get defaultProps () {
    return {}
  }

  render () {
    const s = this
    const {
      props,
      l
    } = s
    let { post } = props
    return (
      <ApView id='post-detail-view'
              className='view'
              spinning={ props.spinning }
              way={ props.way }
      >
        <ApViewHeader onLeftTap={ s.handlePop }
                      leftText={ null }
                      leftIcon={ props.popIcon }
                      titleText={ post && post.text || l('titles.POST') }
                      titleIcon={ POST_ICON }
                      onRightTap={ null }
                      rightIcon={ null }
                      rightText={ null }
        />
        <ApViewBody>
          {
            post ? (
                <div className="post-detail"
                     id={ `post-detail-${post.id}` }
                >
                  <PostDetailStyle prefix={ `#post-detail-${post.id}` }
                                   color={ post.thread.color }
                  />
                  <div className="post-detail-header">
                    <ApContainer>
                      <PostPanel post={ post }
                                 tagValues={ tagValues(post.tags) }
                                 onStar={ s.handleStar }
                                 onReport={ s.handleReport }
                                 onShare={ s.handleShare }
                                 bannable={ props.postBannable }
                                 onBan={ s.handleBan }
                                 onDestroy={ s.handleDestroy }
                                 destroyable={ s.isOwnPost(post) && !post.deleted }
                                 starActive={ props.postStarActiveHash[ post.id ] }
                                 starSpinning={ props.postStarSpinningHash[ post.id ] }
                      />
                    </ApContainer>
                  </div>
                  <div className="post-detail-body">
                    <ApContainer>
                      <ApSection>
                        <ApSectionHeader lined>
                          { l('headings.COMMENTS', { vars: { total: post.commentCount } })}
                        </ApSectionHeader>
                        <ApSectionBody>
                          <div className="embed-view-container">
                            <PostCommentsView { ...props }
                                              limit={ 5 }
                            />
                          </div>
                        </ApSectionBody>
                      </ApSection>
                    </ApContainer>
                  </div>
                  <div className="post-detail-footer">
                  </div>
                </div>
              ) : null
          }
        </ApViewBody>
      </ApView>
    )
  }

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

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

  componentDidMount () {
    debug('didMount')
    const s = this
    const { setMemory } = s.service('memoryService')

    const isThisPost = (postId) => Number(s.props.postId) === Number(postId)

    const onBan = ({ postId }) => {
      if (isThisPost(postId)) {
        s.reloadPost()
      }
    }
    const onDestroy = ({ destroyed }) => {
      if (isThisPost(destroyed.id)) {
        s.reloadPost().then(() =>
          s.handlePop()
        )
      }
    }
    s.listenEvent(POST_BAN_EVENT, onBan)
    s.listenEvent(POST_UNBAN_EVENT, onBan)
    s.listenEvent(POST_DESTROY_EVENT, onDestroy)

    setMemory('postBannable', false)
  }

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

  // --------------------
  // Custom
  // --------------------
  loadBannable (postId) {
    const s = this
    const { use } = s.service('apiService')
    const { setMemory } = s.service('memoryService')
    let { signed } = s.props
    if (!signed) {
      return setMemory('postBannable', false)
    }
    return use('banApi').then((banApi) =>
      banApi.bannableForPost(postId)
        .then((bannable) =>
          setMemory('postBannable', bannable)
        )
    )
  }

  // --------------------
  // Callbacks
  // --------------------
  postDidLoad (post) {
    const s = this
    const { urlForPost } = s.service('urlService')
    const { twitterMetaForPost, ogpMetaForPost } = s.service('shareService')
    s.canonicalForStack(urlForPost(post))
    s.twitterForStack(twitterMetaForPost(post))
    s.ogpForStack(ogpMetaForPost(post))
    s.loadBannable(post.id)
  }

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

  handleStar ({ id: postId }) {
    const s = this
    const { useAll } = s.service('apiService')
    s.ifAuthorized(() => {
      const { props } = s
      s.setPostStarSpinning(postId, true)
      let { postStarActiveHash = {} } = props
      useAll([ 'starApi', 'postApi' ])
        .then(([ starApi, postApi ]) =>
          starApi
            .toggleForPost(postId, !postStarActiveHash[ postId ])
            .then(() => s.loadPost(postId))
        )
        .then(() =>
          s.loadPostStarHash([ postId ])
        )
        .then(() =>
          s.setPostStarSpinning(postId, false)
        )
    })
  }

  handleShare ({ id: postId }) {
    const s = this
    s.handlePushToModal('PostShareView', { postId })
  }

  handleBan ({ id: postId }) {
    const s = this
    s.ifAuthorized(() =>
      s.handlePushToModal('PostBanView', { postId })
    )
  }

  handleDestroy () {
    const s = this
    let { postId } = s.props
    s.ifAuthorized(() =>
      s.handlePushToModal('PostDestroyView', { postId })
    )
  }

}

export default combine(
  asServed(), forSpin(),
  forOne(),
  forAuth(),
  forStarrable(),
  forReportable(),
  forCanonical(),
  forTwitter(),
  forEvent(),
  forOgp(),
  ofPost(),
  asLocaled(), asView(),
  asConnected((state, { srvc }) => {
    const { getMemory } = srvc.memoryService
    return {
      postBannable: getMemory('postBannable')
    }
  })
)(PostDetailView)