context = window
JamBlasterActions = @JamBlasterActions

@ConfigureTracksDialogContents = React.createClass({

    mixins: [Reflux.listenTo(@AppStore, "onAppInit"), Reflux.listenTo(@JamBlasterStore, "onJamBlasterChanged")]


    onAppInit: (@app) ->

    onJamBlasterChanged: (jamblasterState) ->
      @setState(jamblasterState)

    getInitialState: () ->
      {
      timer: null,
      pairing: false,
      pairStart: null,
      allJamBlasters: [],
      pairingTimeout: false,
      paired: false,
      userJamBlasters: [],
      localJamBlasters: []
      }

    closeDialog: (e) ->
      e.preventDefault()
      if !this.state.waitingOnTracks
        @app.layout.closeDialog('configure-tracks')


    render: () ->
      pairedJamBlaster = this.state.pairedJamBlaster
      hasPairedJamBlaster = pairedJamBlaster?

      if hasPairedJamBlaster
        `<div>
          <JamBlasterTrackConfig />

          <div className="buttons">
            <a className="btn-close-jamblaster-config button-orange" disabled={this.state.waitingOnTracks}onClick={this.closeDialog}>CLOSE</a>
          </div>
        </div>`
      else
        `<div>
          <div className="dialog-tabs">
            <a className="selected tab-configure-audio">Inputs &amp; Outputs</a>
            <a className="tab-configure-voice">Voice Chat</a>
          </div>
          <div className="instructions">
          <span>Choose your audio device.  Drag and drop to assign input ports to tracks, and specify the instrument
          for each track. Drag and drop to assign a pair of output ports for session stereo audio monitoring.</span>
          </div>
          <div className="clearall"></div>
          <div className="tab no-selection-range" data-tab-id="music-audio">
            <ConfigureTracks />

            <div className="clearall"></div>
          </div>
          <div className="tab" data-tab-id="voice-chat">
            <form className="select-voice-chat-option section voice">
              <div className="sub-header">Select Voice Chat Option</div>
              <div className="voicechat-option reuse-audio-input">
                <input type="radio" name="voicechat" defaultChecked="checked"/>

                <h3>Use Music Microphone</h3>

                <p>I am already using a microphone to capture my vocal or instrumental music, so I can talk with other
                  musicians using that microphone</p>
              </div>
              <div className="voicechat-option use-chat-input">
                <input type="radio" name="voicechat"/>

                <h3>Use Chat Microphone</h3>

                <p>I am not using a microphone for acoustic instruments or vocals, so use the input selected to the
                  right
                  for voice chat during my sessions</p>
              </div>
            </form>
            <div className="clearall"></div>
            <div className="select-voice-chat">
              <div className="sub-header">Voice Chat Input</div>
              <div className="ftue-box chat-inputs"></div>
              <div className="vu-meter">
                <div className="ftue-controls">
                  <div className="ftue-vu-left voice-chat-vu-left"></div>
                  <div className="ftue-fader chat-fader"></div>
                  <div className="gain-label">GAIN</div>
                  <div className="ftue-vu-right voice-chat-vu-right"></div>
                </div>
              </div>
            </div>
            <div className="clearall"></div>
          </div>

          <div className="buttons">
            <a className="btn-add-new-audio-gear button-grey">ADD NEW AUDIO GEAR</a>
            <a className="button-grey btn-cancel">CANCEL</a>
            <a className="button-orange btn-update-settings">SAVE SETTINGS</a>
          </div>
        </div>`
  }
)