context = window

MixerActions = @MixerActions

@SessionMyTrack = React.createClass({

  mixins: [Reflux.listenTo(@SessionMyTracksStore,"onInputsChanged")]

  onInputsChanged: (sessionMixers) ->

    mixers = sessionMixers.mixers
    newMixers = mixers.findMixerForTrack.apply(mixers, this.props.mixerFinder)

    this.setState({mixers: newMixers})


  getInitialState: () ->
    {mixers: this.props.mixers}

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

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

    MixerActions.mute([this.state.mixers.mixer, this.state.mixers.oppositeMixer], muting)

  render: () ->

    muteMixer = this.state.mixers.muteMixer
    vuMixer = this.state.mixers.vuMixer

    classes = React.addons.classSet({
      'track-icon-mute': true
      'enabled' : !muteMixer.mute
      'muted' : muteMixer.mute
    })

    `<div className="session-track my-track">
      <div className="name">{this.props.name}</div>
      <div className="track-avatar"><img src={this.props.photoUrl}/></div>
      <div className="track-instrument"><img height="45" src={this.props.instrumentIcon} width="45" /></div>
      <div className="track-controls">
        <SessionTrackVU orientation="horizontal" lightCount={4} lightWidth={17} lightHeight={3} side="vul" mixers={this.state.mixers} />
        <div className="track-buttons">
          <div className={classes} data-control="mute" data-mixer-id={muteMixer.id} onClick={this.handleMute}/>
          <div className="track-icon-pan"/>
          <div className="track-icon-equalizer" />
        </div>
        <br className="clearall"/>
      </div>


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

  componentDidMount: () ->
    $root = jQuery(this.getDOMNode())
    $mute = $root.find('.track-icon-mute')
    $pan  = $root.find('.track-icon-pan')

    context.JK.interactReactBubble(
      $mute,
      'SessionTrackVolumeHover',
      {mixers:this.state.mixers, mixerFinder: this.props.mixerFinder},
      {width:235, positions:['right', 'left'], offsetParent:$root.closest('.screen')})

    context.JK.interactReactBubble(
      $pan,
      'SessionTrackPanHover',
      {mixers:this.state.mixers, mixerFinder: this.props.mixerFinder},
      {width:331, positions:['right', 'left'], offsetParent:$root.closest('.screen')})


})