context = window
MIX_MODES = context.JK.MIX_MODES
MixerActions = @MixerActions

@SessionBackingTrack = React.createClass({

  mixins: [@MasterPersonalMixersMixin]

  propTypes: {
    mode: React.PropTypes.bool.isRequired
  }

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

    mixer = @mixer()

    unless mixer?
      logger.debug("ignoring mute because no media mixer")
      return

    muting = $(e.currentTarget).is('.enabled')

    # this button is annoying. the hover shows mute and it's good to use instead
    # MixerActions.mute([@props.mixers['master'].mixer, @props.mixers['personal'].mixer], muting)

  render: () ->

    mixers = @mixers()
    muteMixer = mixers.mixer
    muteMixerId = muteMixer?.id

    classes = classNames({
      'track-icon-mute': true
      'enabled' : !muteMixer?.mute
      'muted' : muteMixer?.mute
    })

    componentClasses = classNames({
      "session-track" : true
      "backing-track" : true
    })

    pan = if mixers.mixer? then mixers.mixer?.pan else 0

    panStyle = {
      transform: "rotate(#{pan}deg)"
      WebkitTransform: "rotate(#{pan}deg)"
    }

    `<div className={componentClasses}>
      <div className="session-track-contents">
        <div className="name">{this.props.shortFilename}</div>
        <div className="track-controls">
          <SessionTrackVU orientation="horizontal" lightCount={4} lightWidth={17} lightHeight={3} side="best" mixers={mixers} />
          <div className="track-buttons">
            <div className="track-icon-pan" style={panStyle}/>
            <div className={classes} data-control="mute" data-mixer-id={muteMixerId} onClick={this.handleMute}/>
          </div>
          <br className="clearall"/>
        </div>

        <br className="clearall"/>
      </div>
    </div>`

  componentDidMount: () ->


    $root = $(this.getDOMNode())
    $mute = $root.find('.track-icon-mute')
    $pan  = $root.find('.track-icon-pan')

    # get rid of idea that only open can modify
    if true # @props.isOpener || @props.mode == MIX_MODES.MASTER
      context.JK.interactReactBubble(
        $mute,
        'SessionTrackVolumeHover',
        () =>
          {mixers:@mixers(), trackType: 'SessionBackingTracks', mode: @props.mode}
        ,
        {width:235, positions:['right', 'left'], offsetParent:$root.closest('.top-parent')})

      context.JK.interactReactBubble(
        $pan,
        'SessionTrackPanHover',
        () =>
          {mixers:@mixers()}
        ,
        {width:331, positions:['right', 'left'], offsetParent:$root.closest('.top-parent')})
    else
      context.JK.helpBubble($mute, 'personal-media-track', {}, {positions:['right', 'left'], offsetParent:$root.closest('.top-parent')})
      context.JK.helpBubble($pan, 'personal-media-track', {}, {positions:['right', 'left'], offsetParent:$root.closest('.top-parent')})
})