$ = jQuery
context = window
MixerActions = context.MixerActions

@SessionOtherTracks = React.createClass({

  mixins: [@SessionMyTracksMixin, Reflux.listenTo(@SessionOtherTracksStore,"onOtherInputsChanged"), Reflux.listenTo(@SessionMyTracksStore,"onInputsChanged"), Reflux.listenTo(@AppStore,"onAppInit")]

  onOtherInputsChanged: (sessionMixers) ->
    session = sessionMixers.session
    mixers = sessionMixers.mixers
    noAudioUsers = mixers.noAudioUsers
    clientsWithAudioOverride = mixers.clientsWithAudioOverride

    participants = []

    if session.inSession()

      self = session.getParticipant(@app.clientId)

      myJamBlasterClientId = null
      if self? && self.client_role == 'child' && self.parent_client_id?
        myJamBlasterClientId = self.parent_client_id

      for participant in session.otherParticipants()

        if myJamBlasterClientId? && participant.client_id == myJamBlasterClientId
          # don't show my parent jamblaster in 'others'
          continue

        if participant.client_role == 'child' && participant.parent_client_id?
          #participant.parent = session.getParticipant(participant.parent_client_id)
          # don't show children nodes
          continue


        if participant.client_id == @app.clientId
          participant.user.possessive = "Your"
          participant.self = true
        else
          participant.user.possessive = participant.user.name + "'s"

        name = participant.user.name
        tracks = []
        firstTrack = participant.tracks[0]

        hasMixer = false

        for track in participant.tracks
          # try to find mixer info for this track
          mixerFinder = [participant.client_id, track, false] # so that other callers can re-find their mixer data

          mixerData = mixers.findMixerForTrack(participant.client_id, track, false, @props.mode)
          if mixerData.mixer?
            hasMixer = true

          tracks.push(track: track, mixers: mixerData, mixerFinder: mixerFinder)
        # todo: sessionModel.setAudioEstablished

        if firstTrack?
          instrumentIcon = context.JK.getInstrumentIcon45(firstTrack.instrument_id)
          instrumentDescription = firstTrack.instrument
        else
          # child scenario
          instrumentIcon = context.JK.getInstrumentIcon45('other')
          instrumentDescription = 'Child'

        photoUrl = context.JK.resolveAvatarUrl(participant.user.photo_url)


        name = "#{name}: #{instrumentDescription}"

        noAudio = false
        if !clientsWithAudioOverride[participant.client_id]
          noAudio = noAudioUsers[participant.client_id]

        participantState = {
          participant: participant,
          tracks: tracks,
          name: name,
          trackName: name
          instrumentIcon: instrumentIcon,
          photoUrl: photoUrl,
          hasMixer: hasMixer,
          noAudio: noAudio
        }

        MixerActions.missingPeerMixer(participant.client_id) unless hasMixer

        participants.push(participantState)

    this.setState(participants: participants, session: session)

  render: () ->

    content = null
    participants = []

    if @state.tracks.length > 0
      for track in @state.tracks
        track = $.extend({}, track)
        track.mode = @props.mode
        participants.push(`<SessionMyTrack key={track.track.client_track_id} {...track} />`)

      if @state.chat
        chat= $.extend({}, @state.chat)
        chat.mode = @props.mode
        participants.push(`<SessionMyChat key="chat" {...chat} />`)

    if this.state.participants.length > 0
      for participant in this.state.participants
        participant.mode = @props.mode
        participants.push(`<SessionOtherTrack key={participant.client_id} {...participant} />`)
    else if this.state.session? && this.state.session.inSession()
      content = null

    `<div className="session-other-tracks">
      <h2>personal mix <span className="session-tracks-help">?</span></h2>
      <SessionInviteMusiciansBtn />
      <div className="session-tracks-scroller">
        {content}
        {participants}

      </div>
    </div>`

  getInitialState:() ->
    {participants:[], session: null, mySession: null, tracks:[], chat:null}

  componentDidMount:() ->
    $root = $(@getDOMNode())
    context.JK.helpBubble($root.find(".session-tracks-help"), "session-personal-mix-instructions", {}, {offsetParent:$root.closest('.top-parent'), positions: ['right', 'bottom'], width:450})


  onAppInit: (app) ->
    @app = app
})