context = window
MIX_MODES = context.JK.MIX_MODES
SessionActions = context.SessionActions
ReactCSSTransitionGroup = React.addons.CSSTransitionGroup;

@SessionMyTracks = React.createClass({

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

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

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

  render: () ->

    content = null
    tracks = []

    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>
      <SessionTrackSettingsBtn />
      <div className="session-tracks-scroller">
        {content}
        <ReactCSSTransitionGroup transitionName="session-track-list" transitionAppear={true}>
          {tracks}
        </ReactCSSTransitionGroup>
      </div>
    </div>`

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

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