context = window

@SessionMasterOtherTracks = React.createClass({

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

  onInputsChanged: (sessionMixers) ->
    session = sessionMixers.session
    mixers = sessionMixers.mixers
    noAudioUsers = mixers.noAudioUsers

    tracks = []

    if session.inSession()

      for participant in session.otherParticipants()

        if participant.is_jamblaster
          continue

        name = participant.user.name;

        if participant.tracks.length > 0
          firstTrack = participant.tracks[0]

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

          for track in participant.tracks

            mixerData = mixers.findMixerForTrack(participant.client_id, track, false, @props.mode)

            instrumentIcon = context.JK.getInstrumentIcon45(firstTrack.instrument_id)

            trackState = {
              participant: participant,
              track: track,
              mixers: mixerData,
              name: name,
              instrumentIcon: instrumentIcon,
              photoUrl: photoUrl,
              hasMixer: mixerData.mixer?  ,
              noAudio: noAudioUsers[participant.client_id]
            }

            tracks.push(trackState)
          # todo: sessionModel.setAudioEstablished

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

  render: () ->

    tracks = []

    for track in @state.tracks
      tracks.push(`<SessionMasterOtherTrack key={track.track.client_track_id} {...track} />`)

    `<div className="session-other-tracks">
      <h2>other live tracks</h2>
      <div className="session-tracks-scroller">
          {tracks}
      </div>
    </div>`

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

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