import React from 'react'
import { connect } from 'react-redux'
import { prefetch, defer } from 'react-fetcher'
import { fetchPerson } from '../../actions'
import { get } from 'lodash'
import { VIEWED_PERSON, VIEWED_SELF, trackEvent } from '../../util/analytics'
import { A, IndexA } from '../../components/A'
const { object } = React.PropTypes

const defaultBanner = 'https://d3ngex8q79bk55.cloudfront.net/misc/default_user_banner.jpg'

@prefetch(({ dispatch, params: { id } }) => dispatch(fetchPerson(id)))
@defer(({ store, params: { id } }) => {
  let state = store.getState()
  let person = state.people[id]
  let currentUser = state.people.current
  if (get(currentUser, 'id') === person.id) {
    return trackEvent(VIEWED_SELF)
  } else {
    return trackEvent(VIEWED_PERSON, {person})
  }
})
@connect(({ people }, props) => ({
  person: people[props.params.id],
  currentUser: people.current
}))
export default class PersonProfile extends React.Component {
  static propTypes = {
    params: object,
    person: object,
    children: object,
    currentUser: object
  }

  render () {
    let { person, currentUser } = this.props
    if (!person) return <div>Loading...</div>

    let bannerUrl = person.banner_url || defaultBanner
    let isSelf = currentUser && person.id === currentUser.id

    return <div id='person'>
      <div className='banner'>
        <div className='background' style={{backgroundImage: `url(${bannerUrl})`}}/>
        <div className='corner'>
          {isSelf && <A to={`/settings?expand=profile`}>Edit profile</A>}
        </div>
        <div className='logo person' style={{backgroundImage: `url(${person.avatar_url})`}}/>
        <h2>{person.name}</h2>
        <ul className='tabs'>
          <li><IndexA to={`/u/${person.id}`}>Posts</IndexA></li>
          <li><A to={`/u/${person.id}/about`}>About</A></li>
          <li><A to={`/u/${person.id}/contributions`}>Contributions</A></li>
          <li><A to={`/u/${person.id}/thanks`}>Thanks</A></li>
        </ul>
      </div>
      {this.props.children}
    </div>
  }
}

@@ -113,16 +113,30 @@
 import %7B
+ FETCH_PERSON,
  fetchPe
@@ -317,16 +317,132 @@
 ents/A'%0A
+import %7B findError %7D from '../../actions/util'%0Aimport AccessErrorMessage from '../../components/AccessErrorMessage'%0A
 const %7B 
@@ -735,16 +735,38 @@
 ple%5Bid%5D%0A
+  if (!person) return%0A
   let cu
@@ -966,17 +966,38 @@
 ople
- %7D, props
+, errors %7D, %7B params: %7B id %7D %7D
 ) =%3E
@@ -1021,21 +1021,8 @@
 ple%5B
-props.params.
 id%5D,
@@ -1051,16 +1051,72 @@
 .current
+,%0A  error: findError(errors, FETCH_PERSON, 'people', id)
 %0A%7D))%0Aexp
@@ -1274,16 +1274,35 @@
 entUser:
+ object,%0A    error:
  object%0A
@@ -1349,16 +1349,23 @@
 rentUser
+, error
  %7D = thi
@@ -1372,16 +1372,74 @@
 s.props%0A
+    if (error) return %3CAccessErrorMessage error=%7Berror%7D/%3E%0A
     if (

add error message when viewing inaccessible person profile