context = window
MIX_MODES = context.JK.MIX_MODES
SessionActions = context.SessionActions

@SessionMyTracks = React.createClass({

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

  goToFtue: (e) ->
    e.preventDefault()

    SessionActions.leaveSession.trigger({location: '/client#/account/audio'})

  render: () ->

    content = null
    videoTutorialLink = null
    tracks = []

    if @state.session?.preppingVstEnable
      delayVstEnable = `<div className="enable-vst-incoming">Enabling VSTs ... <div className="spinner-small"></div></div>`
    else
      videoTutorialLink = `<SessionVideoTutorialLink />`

    if @state.tracks.length > 0
      for track in @state.tracks
        track.mode = MIX_MODES.PERSONAL
        tracks.push(`<SessionMyTrack key={track.track.client_track_id} {...track} />`)

      if @state.chat
        @state.chat.mode = @props.mode
        tracks.push(`<SessionMyChat key="chat" {...this.state.chat} />`)

    else if @state.session? && @state.session.inSession()
      content = `<div className="session-mytracks-notracks">
      <p className="notice">
        You have not set up any inputs for your instrument or vocals.
        If you want to hear yourself play through the JamKazam app,
        and let the app mix your live playing with JamTracks, or with other musicians in online sessions, <a href="#" className="open-ftue-no-tracks" onClick={this.goToFtue}>click here now.</a>
      </p>
    </div>`

    `<div className="session-my-tracks">
      <h2>my live tracks</h2>
      <div className="my-tracks-header">
          <SessionTrackSettingsBtn />
          {videoTutorialLink}
      </div>
      {delayVstEnable}
      <div className="session-tracks-scroller">
        {content}
        {tracks}
      </div>
    </div>`

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

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