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

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

import { ViewEvents } from 'ore-fol-enums'
const debug = defineDebug('project:view:comment-create')
const { COMMENT_CREATE_EVENT } = ViewEvents

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

  static get defaultProps () {
    return {}
  }

  render () {
    const s = this
    let {
      props,
      l,
      labels,
      errors,
      placeholders
    } = s
    let { signed } = props
    return (
      <ApView id='comment-create-view'
              className='view'
              spinning={ props.spinning }
              way={ props.way }
      >
        <ApViewHeader onLeftTap={ s.handlePop }
                      leftText={ null }
                      leftIcon={ props.popIcon }
                      titleText={ l('titles.NEW_COMMENT') }
                      titleIcon={ null }
                      onRightTap={ null }
                      rightIcon={ null }
                      rightText={ null }
        />

        <ApViewBody style={ { minHeight: 'auto' } }>
          <div className="comment-form-wrap">
            {
              signed ? null : (
                  <CommentBlocker askToAuth={ () => s.askToAuth(null) }/>
                )
            }

            <CommentForm labels={ labels }
                         values={ props.entryValues }
                         placeholders={ placeholders }
                         errors={ errors }
                         onSubmit={ s.handleSubmit }
                         onUpdate={ s.handleEntryUpdate }
            />
          </div>
        </ApViewBody>
      </ApView>
    )
  }

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

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

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

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

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

  handleSubmit () {
    const s = this
    const { props } = s
    let {
      postId,
      entryValues = {}
    } = props
    let { text } = entryValues
    if (!text) {
      return
    }
    const { use } = s.service('apiService')
    return s.applySpinWhile(() =>
      use('commentApi')
        .then((commentApi) =>
          commentApi.create({
            postId,
            text,
            additionalInfo: {},
            referrerId: null
          })
        )
        .then((created) => {
          s.handleEntryClear()
          s.fireEvent(COMMENT_CREATE_EVENT, { created })
          return created
        })
        .catch(s.handleEntryErrorCatch)
    )
  }

  // --------------------
  // Dynamic vars
  // --------------------
  get labels () {
    const s = this
    const { l } = s
    return {
      submit: l('buttons.DO_COMMENT')
    }
  }

  get placeholders () {
    const s = this
    const { l } = s
    return {
      text: l('placeholders.COMMENT_TEXT')
    }
  }

  get errors () {
    const s = this
    const { labels, props } = s
    const { localizeErrors } = s.service('localeService')
    return localizeErrors(props.entryErrors, { labels })
  }

}

export default combine(
  asServed(),
  forSpin(),
  asLocaled(),
  asView(),
  forEntry(),
  forAuth(),
  forEvent(),
  ofPost(),
  forOne(),
  asConnected()
)(CommentCreateView)