import React from 'react'
import { connect } from 'react-redux'
import { prefetch } from 'react-fetcher'
import { fetch, ConnectedPostList } from '../ConnectedPostList'
import PostEditor from '../../components/PostEditor'
import { PercentBar } from '../../containers/ChecklistModal'
import { compose } from 'redux'
import { isMember, canModerate } from '../../models/currentUser'
import { getChecklist } from '../../models/community'
import { filter } from 'lodash/fp'
import { showModal } from '../../actions'
const { func, object } = React.PropTypes

const subject = 'community'

class CommunityPosts extends React.Component {
  static propTypes = {
    dispatch: func,
    params: object,
    community: object,
    location: object
  }
  static contextTypes = {currentUser: object}
  static childContextTypes = {community: object}

  getChildContext () {
    let { community } = this.props
    return {community}
  }

  componentDidMount () {
    let { location: { query }, dispatch } = this.props
    let { checklist } = query || {}
    if (checklist) dispatch(showModal('checklist'))
  }

  render () {
    const { community, params: { id }, location: { query } } = this.props
    const { currentUser } = this.context

    return <div>
      {canModerate(currentUser, community) && <CommunitySetup community={community}/>}
      {currentUser && <PostEditor community={community}/>}
      <ConnectedPostList {...{subject, id, query}}/>
      {!isMember(currentUser, community) && <div className='post-list-footer'>
        You are not a member of this community, so you are shown only posts that are marked as public.
      </div>}
    </div>
  }
}

export default compose(
  prefetch(({ dispatch, params: { id }, query, currentUser, store }) =>
    dispatch(fetch(subject, id, query))),
  connect((state, { params }) => ({
    community: state.communities[params.id],
    currentUser: state.people.current
  }))
)(CommunityPosts)

const CommunitySetup = connect()(({ community, dispatch }) => {
  const checklist = getChecklist(community)
  const percent = filter('done', checklist).length / checklist.length * 100

  if (percent === 100) return null

  return <div className='community-setup'
    onClick={() => dispatch(showModal('checklist'))}>
    <PercentBar percent={percent}/>
    Your community is {percent}% set up. <a>Click here</a> to continue setting it up.
  </div>
})

@@ -338,16 +338,28 @@
 Moderate
+, hasFeature
  %7D from 
@@ -1003,24 +1003,65 @@
  this.props%0A
+    const %7B currentUser %7D = this.context%0A
     let %7B ch
@@ -1101,17 +1101,81 @@
 hecklist
-)
+ && hasFeature(currentUser, 'COMMUNITY_SETUP_CHECKLIST')) %7B%0A     
  dispatc
@@ -1200,16 +1200,22 @@
 list'))%0A
+    %7D%0A
   %7D%0A%0A  r
@@ -1365,16 +1365,72 @@
 %0A      %7B
+hasFeature(currentUser, 'COMMUNITY_SETUP_CHECKLIST') && 
 canModer
@@ -1459,16 +1459,24 @@
 nity) &&
+%0A       
  %3CCommun

put checkist behind feature flag