/**
 * AdminUserList view
 *
 * Generated by coz on 10/29/2016,
 * from a template provided by apeman-asset-templates.
 *
 * @function AdminUserListView
 */
'use strict'

import React, { Component, PropTypes as types } from 'react'
import defineDebug from 'debug'
import {
  ApView, ApViewHeader, ApViewBody,
  ApList, ApListHeader, ApListBody, ApListFooter, ApListItem, ApListMoreButton
} from 'apeman-react-basic'
import {
  asView,
  asConnected,
  asServed,
  asLocaled,
  forList,
  forSpin,
  combine
} from '../../wrappers'
import { IconClasses } from 'ore-fol-enums'

const { USER_ICON } = IconClasses

const debug = defineDebug('project:view:admin-user-list')

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

  static get defaultProps () {
    return {}
  }

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

        <ApViewBody>
          {
            users ? (
                <AdminUserListView.List { ...users }
                                        onDetail={ s.handleDetail }
                                        onMore={ s.handleMore }
                                        moreSpinning={ props.moreSpinning }

                />
              ) : null
          }
        </ApViewBody>
      </ApView>
    )
  }

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

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

  componentDidMount () {
    debug('didMount')
    const s = this
    const { use } = s.service('apiService')
    s.applySpinWhile(() =>
      use('userApi').then((userApi) =>
        s.applyListLoad({
          users: () => userApi.list()
        })
      )
    )
  }

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

  // --------------------
  // Sub Components
  // --------------------

  static List ({
    entities,
    onDetail,
    counts,
    more,
    moreSpinning,
    onMore
  }) {
    let { limit, next } = counts
    return (
      <ApList>
        <ApListBody>
          {
            entities.map((entity) => (
              <ApListItem key={ entity.id }
                          disclosure
                          title={ entity.key }
                          subTitle={ entity.email }
                          onTap={ () => onDetail(entity) }
              />
            ))
          }
        </ApListBody>
        <ApListFooter spinning={ moreSpinning }>
          <ApListMoreButton enabled={ more }
                            onTap={ () => onMore({ offset: next, limit: limit }) }/>
        </ApListFooter>
      </ApList>
    )
  }

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

  handleDetail ({ id: userId }) {
    const s = this
    s.handlePush('AdminUserDetail', { userId })
  }

  handleMore ({ limit, offset }) {
    const s = this
    const { use } = s.service('apiService')
    use('userApi').then((userApi) =>
      s.applySpinWhile({
        moreSpinning: () =>
          s.applyListMore({
            users: () => userApi.list({ limit, offset })
          })

      })
    )
  }

  // --------------------
  // For redux
  // --------------------
  static mapStateToProps (state, ownProps) {
    return {}
  }

}

export default combine(
  forList({ prefix: 'admin' }),
  asServed(),
  forSpin(),
  asLocaled(),
  asView(),
  asConnected()
)(AdminUserListView)