context = window
JamBlasterActions = @JamBlasterActions

@JamBlasterTrackConfig = React.createClass({

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

  beforeShow: () ->

  onAppInit: (@app) ->

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


  componentDidMount: () ->
    @checkboxes = [
      {selector: 'input.track1Active', stateKey: 'track1Active'},
      {selector: 'input.track2Active', stateKey: 'track2Active'},
      {selector: 'input.micActive', stateKey: 'micActive'},
      {selector: 'input.track1Phantom', stateKey: 'track1Phantom'},
      {selector: 'input.track2Phantom', stateKey: 'track2Phantom'},
      {selector: 'input.inputTypeTrack1', stateKey: 'inputTypeTrack1'},
      {selector: 'input.inputTypeTrack2', stateKey: 'inputTypeTrack2'},
      {selector: 'input.combined', stateKey: 'combined'}]

    @root = $(@getDOMNode())
    @iCheckify()

  componentWillUpdate: (nextProp, nextState) ->
    pairedJamBlaster = nextState.pairedJamBlaster


    if pairedJamBlaster?
      nextState.combined = pairedJamBlaster.tracks?.combined
      nextState.track1Active = pairedJamBlaster.tracks?.track1Active
      nextState.track2Active = pairedJamBlaster.tracks?.track2Active
      nextState.inputTypeTrack1 = pairedJamBlaster.tracks?.inputTypeTrack1
      nextState.inputTypeTrack2 = pairedJamBlaster.tracks?.inputTypeTrack2
      nextState.track1Phantom = pairedJamBlaster.tracks?.track1Phantom
      nextState.track2Phantom = pairedJamBlaster.tracks?.track2Phantom
      nextState.micActive = pairedJamBlaster.tracks?.micActive
      nextState.track1Instrument = context.JK.convertClientInstrumentToServer(pairedJamBlaster.tracks?.track1Instrument)
      nextState.track2Instrument = context.JK.convertClientInstrumentToServer(pairedJamBlaster.tracks?.track2Instrument)


  componentDidUpdate: () ->
    @iCheckify()

  checkboxChanged: (e) ->
    checked = $(e.target).is(':checked')

    value = $(e.target).val()
    name = $(e.target).attr('name')
    console.log("checkbox changed: ", checked, value)

    if $(e.target).attr('type') == 'checkbox'
      state = {}
      state[name] = checked
      @setState(state)

      JamBlasterActions.updateAudio(name, checked)
    else
      state = {}
      value = value == 'line'
      state[name] = value
      @setState(state)

      JamBlasterActions.updateAudio(name, value)

  instrumentChanged: (key, e) ->
    value = $(e.target).val()
    state = {}
    state[key] = value
    @setState(state)

    JamBlasterActions.updateAudio(key, value)

  getInitialState: () ->
    {
    allJamBlasters: [],
    userJamBlasters: [],
    localJamBlasters: []
    }

  convertToClientInstrument: (instrumentId) ->
    clientInstrumentId = null
    if instrumentId != null && instrumentId != ''
      clientInstrumentId = context.JK.instrument_id_to_instrument[instrumentId].client_id
    else
      clientInstrumentId = 10
    clientInstrumentId

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


    if !hasPairedJamBlaster
      return `<div className="jamblaster-track-config">
        You have no paired JamBlaster currently. If you've paired the JamBlaster in the past, be sure it's plugged in
        and connected to an ethernet cable. If you have not paired a JamBlaster before, please go to the <a
        href="/client#/jamblaster">JamBlaster management page</a>.
      </div>`

    instruments = []
    for instrument in context.JK.server_to_client_instrument_alpha
      instruments.push(`<option key={instrument.server_id} value={instrument.server_id}>{instrument.display}</option>`)

    #console.log("JAMBLASTERTRACKCONFIG", pairedJamBlaster)

    combined = @state.combined
    track1Active = @state.track1Active
    track2Active = @state.track2Active
    inputTypeTrack1 = @state.inputTypeTrack1
    inputTypeTrack2 = @state.inputTypeTrack2
    track1Phantom = @state.track1Phantom
    track2Phantom = @state.track2Phantom
    micActive = @state.micActive
    track1Instrument = @state.track1Instrument #context.JK.convertClientInstrumentToServer(@state.track1Instrument)
    track2Instrument = @state.track2Instrument #context.JK.convertClientInstrumentToServer(@state.track2Instrument)

    if this.state.waitingOnTracks
      contents = `<div className="waiting-on-tracks">
        <div className="spinner spinner-large">
        </div>
        <br/>
        <p>Please wait as the JamBlaster reconfigures it's settings.</p>
      </div>`
    else
      contents = `<div>
        <div className="input-1">
          <h3>Input 1</h3>

          <div className="input-type-section">
            <h4>Type</h4>

            <div className="input-type field">
              <div className="input-type-choice">
                <input className="input-type inputTypeTrack1" type="radio" name="inputTypeTrack1" readOnly={true}
                       value="line" disabled={masterDisabled}
                       defaultChecked={inputTypeTrack1}/><label>Line</label>
              </div>
              <div className="input-type-choice">
                <input className="input-type inputTypeTrack1" type="radio" name="inputTypeTrack1" readOnly={true}
                       value="instrument" disabled={masterDisabled}
                       defaultChecked={!inputTypeTrack1}/><label>Instrument</label>
              </div>
            </div>
          </div>

          <div className="phantom-section">
            <h4>Power</h4>

            <div className="phantom field">
              <input className="phantom track1Phantom" name="track1Phantom" type="checkbox" disabled={masterDisabled}
                     value={track1Phantom}/><label>Phantom power</label>
            </div>
          </div>
          <div className="instrument-section">
            <h4>Instrument</h4>
            <select name="track1Instrument" value={track1Instrument} disabled={masterDisabled}
                    onChange={this.instrumentChanged.bind(this, 'track1Instrument')}>
              {instruments}
            </select>
          </div>
        </div>
        <div className="input-2">
          <h3>Input 2</h3>

          <div className="input-type-section">
            <h4>Type</h4>

            <div className="input-type field">
              <div className="input-type-choice">
                <input className="input-type inputTypeTrack2" type="radio" name="inputTypeTrack2" readOnly={true}
                       value="line" disabled={masterDisabled || combined}
                       defaultChecked={inputTypeTrack2}/><label>Line</label>
              </div>
              <div className="input-type-choice">
                <input className="input-type inputTypeTrack2" type="radio" name="inputTypeTrack2" readOnly={true}
                       value="instrument" disabled={masterDisabled || combined}
                       defaultChecked={!inputTypeTrack2}/><label>Instrument</label>
              </div>
            </div>
          </div>

          <div className="phantom-section">
            <h4>Power</h4>

            <div className="phantom field">
              <input className="phantom track2Phantom" name="track2Phantom" type="checkbox" disabled={masterDisabled || combined}
                     value={track2Phantom}/><label>Phantom power</label>
            </div>
          </div>
          <div className="instrument-section">
            <h4>Instrument</h4>
            <select name="track2Instrument" value={track2Instrument} disabled={masterDisabled || combined}
                    onChange={this.instrumentChanged.bind(this, 'track2Instrument')}>
              {instruments}
            </select>
          </div>
        </div>
        <br className="clearall"/>

        <div className="combined-option">
          <input className="combined" type="checkbox" name="combined" value={combined}
                 disabled={masterDisabled}></input><label>Combine inputs 1 &amp; 2 into a single stereo track</label>
        </div>
      </div>`
    `<div className="jamblaster-track-config">
      {contents}
    </div>`
})