/**
 * AccountDetail view
 *
 * Generated by coz on 2016-10-10,
 * from a template provided by apeman-asset-templates.
 *
 * @class AccountDetailView
 */
'use strict'

import React, { Component, PropTypes as types } from 'react'
import defineDebug from 'debug'
import {
  ApView, ApViewHeader, ApViewBody,
  ApInfo, ApInfoHeader, ApInfoBody, ApInfoItem,
  ApButton
} from 'apeman-react-basic'
import { IconClasses } from 'ore-fol-enums'
import { ofSigned, asView, asServed, asLocaled, asConnected, combine } from '../../wrappers'

import { ProfileImage } from '../../fragments'

const { USER_ICON } = IconClasses

const debug = defineDebug('project:view:account-detail')

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

  static get defaultProps () {
    return {}
  }

  render () {
    const s = this
    const {
      props,
      l
    } = s
    const {
      signed
    } = props

    let { profile, oauth } = (signed || {})

    return (
      <ApView id='account-detail-view'
              className='view'
              spinning={ props.spinning }
              way={ props.way }
      >
        <ApViewHeader onLeftTap={ s.handlePop }
                      leftText={ null }
                      leftIcon={ props.popIcon }
                      titleText={ l('titles.ACCOUNT_INFO') }
                      titleIcon={ USER_ICON }
                      onRightTap={ null }
                      rightIcon={ null }
                      rightText={ null }
        />

        <ApViewBody>
          {
            signed ? (
                <div>
                  <ApInfo>
                    <ApInfoHeader>
                      {
                        oauth ? null : (
                            <ApButton onTap={ s.handleAccountEdit }>
                              { l('buttons.SHOW_EDIT') }
                            </ApButton>
                          )
                      }
                      { l('headings.ACCOUNT') }
                    </ApInfoHeader>
                    <ApInfoBody>
                      <ApInfoItem label={ l('labels.USER_KEY') }
                                  value={ signed.key }
                      />
                      {
                        oauth ? null : (
                            <ApInfoItem label={ l('labels.EMAIL') }
                                        value={ signed.email }
                            />
                          )
                      }
                      {
                        oauth ? (
                            <ApInfoItem label={ l('labels.OAUTH_PROVIDER') }
                                        value={ oauth.kind }
                            />
                          ) : null
                      }
                    </ApInfoBody>
                  </ApInfo>
                  {
                    oauth ? null : (
                        <ApInfo>
                          <ApInfoHeader>
                            <ApButton onTap={ s.handleAuthEdit }>
                              { l('buttons.SHOW_EDIT') }
                            </ApButton>
                            { l('headings.AUTHENTICATION') }
                          </ApInfoHeader>
                          <ApInfoBody>
                            <ApInfoItem label={ l('labels.PASSWORD') }
                                        value={ l('labels._MASKED') }
                            />
                          </ApInfoBody>
                        </ApInfo>
                      )
                  }
                  <ApInfo>
                    <ApInfoHeader>
                      {
                        oauth ? null : (
                            <ApButton onTap={ s.handleProfileEdit }>
                              { l('buttons.SHOW_EDIT') }
                            </ApButton>
                          )
                      }
                      { l('headings.PROFILE') }
                    </ApInfoHeader>
                    <ApInfoBody>
                      <ApInfoItem label={ l('labels.PROFILE_NAME') }
                                  value={ profile && profile.name }
                      />

                      <ApInfoItem label={ l('labels.PROFILE_IMAGE') }
                                  value={ <ProfileImage profile={ profile }/> }
                      />
                    </ApInfoBody>
                  </ApInfo>

                  <br/>
                  <ul className='info-menu-list'>
                    <li><a onClick={ s.handleSignout }>{ l('menus.SIGNOUT') }</a></li>
                    <li><a onClick={ s.handleResign }>{ l('menus.RESIGN') }</a></li>
                  </ul>
                </div>
              ) : null
          }
        </ApViewBody>
      </ApView>
    )
  }

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

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

  componentDidMount () {
    debug('didMount')
    const s = this
    const { props } = s
    let { signed } = props
    if (!signed) {
      s.handlePop()
    }
  }

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

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

  handleAccountEdit () {
    const s = this
    return s.handlePushToModal('AccountAccountEdit')
  }

  handleAuthEdit () {
    const s = this
    return s.handlePushToModal('AccountAuthEdit')
  }

  handleProfileEdit () {
    const s = this
    return s.handlePushToModal('AccountProfileEdit')
  }

  handleSignout () {
    const s = this
    s.handlePush('SignSignoutView', {})
  }

  handleResign () {
    const s = this
    s.handlePush('ResignLeadView', {})
  }
}

export default combine(
  asServed(),
  ofSigned(),
  asLocaled(),
  asView(),
  asConnected()
)(AccountDetailView)