 React = require 'react'
 talkClient = require 'panoptes-client/lib/talk-client'
 apiClient = require 'panoptes-client/lib/api-client'
-PromiseRenderer = require '../components/promise-renderer'
 Paginator = require './lib/paginator'
 {Link} = require 'react-router'
 Loading = require '../components/loading-indicator'


promptToSignIn = -> alert (resolve) -> <SignInPrompt onChoose={resolve} />

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


  getDefaultProps: ->
    location: query: page: 1

  getInitialState: ->
    conversations: []
  
  componentWillMount: ->
    @setConversations @props.user

  componentWillReceiveProps: (nextProps) ->
    unless nextProps.user is @props.user
      @setConversations(nextProps.user)
    unless nextProps.location.query.page is @props.location.query.page
      @setConversations(nextProps.user, nextProps.location.query.page)

  setConversations: (user, page) ->
    return unless user?
    conversationsQuery =
      user_id: user.id
      page_size: PAGE_SIZE
      page: @props.location.query.page
      sort: '-updated_at'
      include: 'users'

    talkClient
      .type 'conversations'
      .get conversationsQuery
      .then (conversations) =>
        @setState {conversations}

  onPageChange: (page) ->
    @goToPage(page)

  goToPage: (n) ->
    @context.router.push "/inbox?page=#{n}"
    @setConversations(@props.user, n)

  message: (data, i) ->
    <p key={data.id} class>{data.body}</p>

  render: ->
    <div className="talk inbox content-container">
      {unless @props.user?
        <p>Please <button className="link-style" type="button" onClick={promptToSignIn}>sign in</button> to view your inbox</p>
      else
        <div>
          <h1>Inbox</h1>

          {if @state.conversations.length is 0
            <p>You have not started any private conversations yet. Send users private messages by visiting their profile page.</p>
          else
            conversationsMeta = @state.conversations[0].getMeta()
            <div>
              {@state.conversations.map (conversation) => 
                <ConversationLink conversation={conversation} user={@props.user} key={conversation.id} />
              }
              <Paginator
                page={+conversationsMeta.page}
                pageCount={+conversationsMeta.page_count} />
            </div>}

          <div>
            <h1>Send a message</h1>
            <InboxForm user={@props.user} />
          </div>
        </div>
        }
    </div>
