context = window
rest = new context.JK.Rest()
ChatActions = @ChatActions


@ChatWindow = React.createClass({
  mixins: [Reflux.listenTo(@AppStore, "onAppInit"), Reflux.listenTo(@UserStore, "onUserChanged"),
           Reflux.listenTo(@ChatStore, "onChatChanged")]

  lastChannel: null

  getInitialState: () ->
    state = context.ChatStore.getState()
    state

  onChatChanged: (chatState) ->
    @setState(chatState)

  onUserChanged: (userState) ->
    @setState(userState)

  onAppInit: (app) ->
    @app = app

  activateChannel: (channel, e) ->
    e.preventDefault()
    ChatActions.activateChannel(channel);

  convertPurpose: (purpose) ->
    if !purpose?
      return ''

    switch purpose
      when 'Lesson Requested' then 'requested lesson'
      when 'Lesson Canceled' then 'canceled lesson'
      when 'Lesson Approved' then 'approved lesson'
      when 'All Lesson Times Updated' then 'updated all lesson times'
      when 'Lesson Updated Time Approved' then 'updated lesson time'
      when 'New Time Proposed' then 'proposed new time'
      when 'Lesson Declined' then 'declined lesson'
      else purpose

  render: () ->

    if !this.props.hideHeader
      tabs = []
      for channel of @state.msgs
        classes = {}
        classes[channel] = true
        classes['chat-tab'] = true
        classes['active'] = channel == @state.channel

        if channel == 'global'
          display = 'Global'
        else if channel == 'session'
          display = 'Session'
        else if channel == 'lesson'
          display = 'Lesson'
        else if !channel?
          display = 'Global'
        else
          display = 'Unknown'

        if display == 'Unknown'
          continue

        tabs.push(`<div key={channel} className={classNames(classes)}><a onClick={this.activateChannel.bind(this, channel)}>{display}</a></div>`)
      chatTabs = `<div className="chat-tabs">
        {tabs}
      </div>`

    msgs = []

    if this.props?.channel?
      activeChannel = this.props.channel
    else
      activeChannel = @state.channel

    activeMsgs = @state.msgs[activeChannel] || []

    for msg in activeMsgs

      timeago = $.timeago(msg.created_at)
      if msg.sender_id == context.JK.currentUserId
        sender = "me"
      else
        sender = msg.sender_name

      if this.props.newFormat
        if msg.purpose
          purpose = `<div className="chat-message-purpose">{this.convertPurpose(msg.purpose)}</div>`
        else
          purpose = null
        msgs.push(`<div key={msg.msg_id} className="chat-message">
          <span className="chat-message-sender">{sender}</span>{purpose}<time className="chat-message-timestamp timeago">{timeago}</time>
          <span className="chat-message-text">{msg.msg}</span>
        </div>`)

      else

        msgs.push(`<div key={msg.msg_id} className="chat-message">
          <span className="chat-message-sender">{sender}</span>
          <span className="chat-message-text">{msg.msg}</span>
          <time className="chat-message-timestamp timeago">{timeago}</time>
        </div>`)

    if this.props?.showEmailNotice
      otherName = this.props?.other?.name
      emailSentNotice = `<div className="email-notice">an email will be sent if {otherName} is offline</div>`
    if this.props?.showClose
      closeBtn = `<a className="button-grey btn-close-chat" onClick={this.handleCloseMessage}>CLOSE</a>`

    topClasses = {ChatWindow: true}
    if this.props?.rootClass?
      topClasses[this.props.rootClass] = true

    `<div className={classNames(topClasses)}>
      {chatTabs}
      <div className="active-tab">
        <div className="chat-list-scroller">
          {msgs}
        </div>
      </div>
      <div className="chat-sender">
        <form onSubmit={this.handleSendMessage} className="chat-message-form">
          <textarea onKeyDown={this.handleEnter} name="chat-message" id="new-chat-message" placeholder="enter message"></textarea>

          <a className="button-orange btn-send-chat-message" onClick={this.handleSendMessage}>SEND</a>
          {closeBtn}
          {emailSentNotice}
        </form>

      </div>
    </div>`

  activeChannelType: () ->
    if this.props?.channelType?
      this.props.channelType
    else
      @state.channel

  sendMessage:()->
    if !context.JK.JamServer.connected
      return false

    msg = @textBox.val()
    if !msg? || msg == ''
      # don't bother the server with empty messages
      return false;

    if !@sendingMessage
      @sendingMessage = true
      target_user_id = this.props?.other?.id
      ChatActions.sendMsg(msg, @sendMsgDone, @sendMsgFail, target_user_id, @activeChannelType())

  sendMsgDone: () ->
    @textBox.val('')
    @sendingMessage = false

  sendMsgFail: (jqXHR) ->
    if jqXHR.status == 404
      @app.notifyServerError(jqXHR, 'Session chat is only available while in session.')
    else
      @app.notifyServerError(jqXHR, 'Unable to Send Chat Message')
    @sendingMessage = false

  handleSendMessage: (e) ->
    e.preventDefault()
    @sendMessage()

  handleCloseMessage: (e) ->
    e.preventDefault()
    this.props.onCloseClicked()

  componentDidMount: () ->
    @root = $(@getDOMNode())
    @textBox = @root.find('textarea')

  componentDidUpdate: () ->
    if @lastChannel != @state.channel
      speed = 0
    else
      speed = 'slow'
    @lastChannel = @state.channel

    #speed = 0 #slow
    $scroller = @root.find('.chat-list-scroller')
    $scroller.animate({scrollTop: $scroller[0].scrollHeight}, speed)

  pasteIntoInput: (el, text) ->
    el.focus();
    if typeof el.selectionStart == "number" && typeof el.selectionEnd == "number"
      val = el.value
      selStart = el.selectionStart
      el.value = val.slice(0, selStart) + text + val.slice(el.selectionEnd)
      el.selectionEnd = el.selectionStart = selStart + text.length
    else if typeof document.selection != "undefined"
      textRange = document.selection.createRange()
      textRange.text = text
      textRange.collapse(false)
      textRange.select()

  handleEnter: (evt) ->
    if evt.keyCode == 13 && evt.shiftKey
      evt.preventDefault()
      @pasteIntoInput($(evt.target).get(0), "\n")
    else if evt.keyCode == 13 && !evt.shiftKey
      @sendMessage()
})