 Translate = require 'react-translate-component'
 counterpart = require 'counterpart'
 Paginator = require '../talk/lib/paginator'
-PromiseRenderer = require '../components/promise-renderer'
 SubjectViewer = require '../components/subject-viewer'
 Loading = require '../components/loading-indicator'
 {Link} = require 'react-router'

    error: 'There was an error listing this collection.'
    noSubjects: 'No subjects in this collection.'

module.exports = React.createClass
  displayName: 'CollectionShowList'

  contextTypes:
    geordi: React.PropTypes.object.isRequired
    router: React.PropTypes.object.isRequired

  componentDidMount: ->
    @fetchCollectionSubjects pick @props.location.query, VALID_COLLECTION_MEMBER_SUBJECTS_PARAMS

  componentWillReceiveProps: (nextProps, nextContext) ->
    @fetchCollectionSubjects pick nextProps.location.query, VALID_COLLECTION_MEMBER_SUBJECTS_PARAMS

  fetchCollectionSubjects: (query = null) ->
    query ?= @props.location.query

    defaultQuery =
      page: 1
      page_size: 12

    query = Object.assign {}, defaultQuery, query
    return @props.collection.get 'subjects', query

  onPageChange: (page) ->
    nextQuery = Object.assign {}, @props.location.query, { page }
    @context.router.push
      pathname: @props.location.pathname
      query: nextQuery

  handleDeleteSubject: (subject) ->
    @props.collection.removeLink 'subjects', [subject.id.toString()]
      .then =>
        @props.collection.uncacheLink 'subjects'
        @forceUpdate()

  isOwnerOrCollaborator: ->
    collaboratorOrOwnerRoles = @props.roles.filter (collectionRoles) ->


    return hasPermission

  render: ->
    logClick = @context.geordi?.makeHandler? 'about-menu'
    <div className="collection-subject-viewer">
      <SubjectViewer defaultStyle={false} subject={@props.subject} user={@props.user}>
        {if @isOwnerOrCollaborator()
          <button type="button" className="collection-subject-viewer-delete-button" onClick={@props.onDelete}>
            <i className="fa fa-close" />
          </button>}
          <Link className="subject-link" to={"/projects/#{@state.project?.slug}/talk/subjects/#{@props.subject.id}"} onClick={logClick?.bind(this, 'view-favorite')}>
            <span></span>
          </Link>
      </SubjectViewer>
    </div>
    
module.exports = React.createClass
  displayName: 'CollectionShowList'

  contextTypes:
    geordi: React.PropTypes.object.isRequired
    router: React.PropTypes.object.isRequired

  getInitialState: ->
    subjects: null
    error: null

  componentWillMount: ->
    @fetchCollectionSubjects pick @props.location.query, VALID_COLLECTION_MEMBER_SUBJECTS_PARAMS
      .then (subjects) =>
        error = null
        @setState {subjects, error}

  componentWillReceiveProps: (nextProps, nextContext) ->
    @fetchCollectionSubjects pick nextProps.location.query, VALID_COLLECTION_MEMBER_SUBJECTS_PARAMS
      .then (subjects) =>
        error = null
        @setState {subjects, error}

  fetchCollectionSubjects: (query = null) ->
    query ?= @props.location.query

    defaultQuery =
      page: 1
      page_size: 12

    query = Object.assign {}, defaultQuery, query
    return @props.collection.get 'subjects', query
      .catch (error) =>
        @setState {error}

  onPageChange: (page) ->
    nextQuery = Object.assign {}, @props.location.query, { page }
    @context.router.push
      pathname: @props.location.pathname
      query: nextQuery

  handleDeleteSubject: (subject) ->
    subjects = @state.subjects
    index = subjects.indexOf subject
    subjects.splice index, 1
    @setState {subjects}
    
    @props.collection.removeLink 'subjects', [subject.id.toString()]
      .then =>
        @props.collection.uncacheLink 'subjects'

  render: ->
    if @state.subjects?
      <div className="collections-show">
        {if @state.subjects.length is 0
          <Translate component="p" content="collectionSubjectListPage.noSubjects" />}

        {if @state.subjects.length > 0
          meta = @state.subjects[0].getMeta()

          <div>
            <div className="collection-subjects-list">
              {@state.subjects.map (subject) =>
                <SubjectNode
                  key={subject.id}
                  subject={subject}
                  user={@props.user}
                  roles={@props.roles}
                  onDelete={@handleDeleteSubject.bind @, subject}
                />
              }
            </div>

            <Paginator
              page={meta.page}
