context = window
logger = context.JK.logger
ChannelGroupIds = context.JK.ChannelGroupIds
CategoryGroupIds = context.JK.CategoryGroupIds
MIX_MODES = context.JK.MIX_MODES

@SessionTrackGain = React.createClass({

  propTypes: {
    gainType: React.PropTypes.string
    controlGroup: React.PropTypes.string
  }

  getInitialState: () ->
    {
      mixers: @props.mixers,
      behaviors: @props.behaviors || {}
    }

  faderChanged: (e, data) ->
    $target =  $(this)
    groupId = $target.data('groupId')
    mixers = @state.mixers.mixer


    # if this is a media track, jam track , or media category, affect volume of both mixer and opposing mixer
    if @state.mixers.mixer.group_id == ChannelGroupIds.MediaTrackGroup || @state.mixers.mixer.group_id == ChannelGroupIds.JamTrackGroup || ((@state.mixers.mixer.group_id == ChannelGroupIds.MonitorCatGroup || @state.mixers.mixer.group_id == ChannelGroupIds.MasterCatGroup) && @state.mixers.mixer.name == CategoryGroupIds.MediaTrack)
      MixerActions.faderChanged(data, [@state.mixers.mixer, @state.mixers.oppositeMixer], @props.gainType, @props.controlGroup)
    else
      MixerActions.faderChanged(data, mixers, @props.gainType, @props.controlGroup)

  render: () ->
    # mixer can be a single item or array
    mixer = @state.mixers?.mixer
    if mixer && $.isArray(mixer)
      mixer = mixer[0]

    mixerId = mixer?.id

    `<div className="track-gain">
      <div className="fader vertical" data-control="fader" data-fader-id={mixerId} data-orientation="vertical">
        <div className="handle" data-control="fader-handle">
          <img src="/assets/content/slider_gain_vertical.png" width="28" height="11"/>
        </div>
      </div>
    </div>`

  componentDidMount: () ->
    $root = jQuery(this.getDOMNode())
    if !$root.is('.track-gain')
      logger.error("unknown root node")

    # Initialize gain position
    mixer = @state.mixers?.mixer
    if mixer && $.isArray(mixer)
      mixer = mixer[0]

    sessionController = null
    if mixer.mode == MIX_MODES.MASTER
      # sessionController is only relevant for master mode
      sessionController = this.props.sessionController

    context.JK.FaderHelpers.renderFader2($root, {faderType: 'vertical', sessionController:sessionController});

    MixerActions.initGain(mixer)

    # watch for fader change events
    $root.on('fader_change', @faderChanged);
})