context = window
rest = context.JK.Rest()
ReactCSSTransitionGroup = React.addons.CSSTransitionGroup
ASSIGNMENT = context.JK.ASSIGNMENT
VOICE_CHAT = context.JK.VOICE_CHAT
MAX_TRACKS = context.JK.MAX_TRACKS
MAX_OUTPUTS = context.JK.MAX_OUTPUTS
gearUtils = context.JK.GearUtils
MIDI_TRACK = context.JK.MIDI_TRACK


@ConfigureTracks = React.createClass({

  mixins: [Reflux.listenTo(@ConfigureTracksStore,"onConfigureTracksChanged")]

  getInitialState: () ->
    {configureTracks: null}

  onConfigureTracksChanged: (configureTracks) ->
    @setState({configureTracks: configureTracks})

  render: () ->

    liveTracks = []
    outputs = []

    trackAssignments = @state.configureTracks?.trackAssignments

    if gon.midi_enabled
      addMidiTrack = `<a onClick={this.openLiveTrackDialog.bind(this, 'midi')} className="button-orange">ADD MIDI TRACK . . . </a>`

    if trackAssignments

      for inputsForTrack, i in trackAssignments.inputs.assigned
        candidate = inputsForTrack[0]

        inputs = []
        if candidate.assignment == MIDI_TRACK
          trackTypeLabel = 'MIDI'
          midiDeviceName = 'UNKNOWN'
          for midiDevice in @state.configureTracks.attachedMidiDevices.midiDevices
            if midiDevice.deviceIndex == inputsForTrack.vst?.midiDeviceIndex
              midiDeviceName = midiDevice.deviceName
          inputs.push(`<div key={i} className="live-input">{midiDeviceName}</div>`)
        else
          trackTypeLabel = 'AUDIO'
          for input in inputsForTrack
            inputs.push(`<div key={i} className="live-input">{input.name}</div>`)

        if !inputsForTrack.instrument_id?
          instrument = `<span className="none">?</span>`
        else
          instrument = `<span><img src={context.JK.getInstrumentIconMap24()[inputsForTrack.instrument_id].asset} /></span>`




        vstName = 'None'
        if inputsForTrack.vst? && inputsForTrack.vst.name != 'NONE'
          vstName = "#{inputsForTrack.vst.name} by #{inputsForTrack.vst.manuf}"

        liveTracks.push(
          `<div key={i + 1} className="live-track">
            <div className={classNames({'input-track-info': true, one: inputsForTrack.length == 1, two: inputsForTrack.length == 2})}><span className="assignment">{i + 1}:</span><span className="track-type-label">{trackTypeLabel}</span>{inputs}</div>
            <div className="plugin-info">{vstName}</div>
            <div className="plugin-instrument">{instrument}</div>
            <div className="live-track-actions">
              <a className="update-live-track" onClick={this.onUpdateLiveTrack.bind(this, inputsForTrack)}>update</a>
              <a className="delete-live-track" onClick={this.onDeleteLiveTrack.bind(this, inputsForTrack)}>delete</a>
            </div>
          </div>`)

      for output, i in trackAssignments.outputs.assigned
        outputs.push(
          `<div key={output.id} className="output-track">
            <div className="output-track-info"><span className="assignment">{i + 1}:</span><div className="output">{output.name}</div></div>
          </div>`)

    `<div className="ConfigureTracks">
      <select className="certified-audio-profile" style={{display:'none'}}></select>
      <div className="inputs-view">
        <div>
          <h3 className="session-audio-inputs-header">Session Audio Inputs (Live Tracks)</h3>
          <h3 className="plugin-header">Plugin</h3>
          <h3 className="instrument-header">Instrument</h3>
        </div>
        <div className="live-tracks">
        {liveTracks}
        </div>
        <div className="add-track-action">
        <a onClick={this.openLiveTrackDialog.bind(this, 'audio')} className="button-orange">ADD AUDIO TRACK . . . </a>
        {addMidiTrack}
        </div>
      </div>
      <div className="outputs-view">
        <div>
          <h3 className="session-audio-outputs-header">Session Audio Outputs (Requires 2 Ports)</h3>
          <div className="output-tracks">
            {outputs}
          </div>
          <a onClick={this.openOutputTrackDialog} className="button-orange">UPDATE OUTPUTS . . . </a>
        </div>
      </div>
      <div className="clearall"></div>
    </div>`

  onUpdateLiveTrack:(liveTrack, e) ->
    e.preventDefault()

    ConfigureTracksActions.showEditTrack(liveTrack.assignment)

  onDeleteLiveTrack:(liveTrack, e) ->
    e.preventDefault()

    if liveTrack.assignment == 1
      # can't delete the last assignment
      context.JK.Banner.showAlert('You can not delete the 1st audio track.')
    else
      trackType = 'live'
      if liveTrack.assignment == MIDI_TRACK
        trackType = 'MIDI'
      context.JK.Banner.showYesNo({
          title: "Confirm Deletion",
          html: "Are you sure you want to delete this #{trackType} track?",
          yes: =>
            ConfigureTracksActions.deleteTrack(liveTrack.assignment)
        })


  openLiveTrackDialog: (type, e) ->
    e.preventDefault()

    ConfigureTracksActions.showAddNewTrack(type)

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

    ConfigureTracksActions.showEditOutputs()
})