context = window

MixerActions = @MixerActions

@SessionOtherTrack = React.createClass({

  mixins: [Reflux.listenTo(@SessionStatsStore,"onStatsChanged")]

  onStatsChanged: (stats) ->
    @setState({stats: stats[@props.participant.client_id]})

  getInitialState: () ->
    stats = window.SessionStatsStore.stats
    if stats?
      clientStats = stats[@props.participant.client_id]
    else
      clientStats = null
    {stats: clientStats}

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

    unless this.props.hasMixer
      logger.debug("ignoring mute; no mixer")
      return

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

    mixers = if this.props.tracks.length > 0 then this.props.tracks[0].mixers else {}

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

  render: () ->

    # today, all mixers are the same for a remote participant; so just grab the 1st
    mixers = if this.props.tracks.length > 0 then this.props.tracks[0].mixers else {}

    muteMixer = mixers.muteMixer
    vuMixer = mixers.vuMixer
    muteMixerId = muteMixer?.id

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

    componentClasses = classNames({
      "session-track" : true
      "my-track" : true
      "has-mixer" : this.props.hasMixer
      "no-mixer" : !this.props.hasMixer
      "has-audio" : this.props.noAudio != true
      "no-audio" : this.props.noAudio == true
    })

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

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

    classification = @state.stats?.classification

    if !classification?
      classification = 'unknown'

    connectionStateClasses = { 'track-connection-state': true}
    connectionStateClasses[classification] = true

    `<div className={componentClasses}>
      <a className="noAudioHelp">No Audio?</a>
      <div className="disabled-track-overlay" />
      <div className="session-track-contents">
        <div className="name">{this.props.trackName}</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="best" mixers={mixers} />
          <div className="track-buttons">
            <div className={classes} data-control="mute" data-mixer-id={muteMixerId} onClick={this.handleMute}/>
            <div className="track-icon-pan" style={panStyle}/>
            <div className={classNames(connectionStateClasses)}/>
          </div>
          <br className="clearall"/>
        </div>

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

  componentDidMount: () ->

    if this.props.participant.client_id?
      context.jamClient.SessionSetUserName(this.props.participant.client_id, this.props.name)
    else
      logger.error("no participant client ID")

    $root = $(this.getDOMNode())
    $mute = $root.find('.track-icon-mute')
    $pan  = $root.find('.track-icon-pan')
    $connectionState = $root.find('.track-connection-state')
    $noAudioHelp = $root.find('.noAudioHelp')

    context.JK.interactReactBubble(
      $mute,
      'SessionTrackVolumeHover',
      () =>
        mixers = if this.props.tracks.length > 0 then this.props.tracks[0].mixers else {}
        {mixers:mixers, trackType: 'SessionOtherTrack', mode: @props.mode}
      ,
      {width:235, positions:['right', 'left'], offsetParent:$root.closest('.screen')})

    context.JK.interactReactBubble(
      $pan,
      'SessionTrackPanHover',
      () =>
        mixers = if this.props.tracks.length > 0 then this.props.tracks[0].mixers else {}
        {mixers:mixers}
      ,
      {width:331, positions:['right', 'left'], offsetParent:$root.closest('.screen')})

    context.JK.interactReactBubble(
      $connectionState,
      'SessionStatsHover',
      () =>
        {participant: this.props.participant}
    ,
      {width:385, positions:['right', 'left'], offsetParent:$root.closest('.screen')})

    context.JK.helpBubblePersist($noAudioHelp, 'no-audio-help', {}, {duration:10000, offsetParent:$root.closest('.screen'), width:385, positions:['bottom','right', 'left', 'top']})

    unless this.props.hasMixer
      $mute.on("mouseenter", false)
      $mute.on("mouseleave", false)
      $pan.on("mouseentere", false)
      $pan.on("mouseleave", false)

  componentWillUpdate: (nextProps, nextState) ->
    $root = $(this.getDOMNode())
    $mute = $root.find('.track-icon-mute')
    $pan  = $root.find('.track-icon-pan')

    # disable hover effects if there is no mixer
    if nextProps.hasMixer
      $mute.off("mouseenter", false)
      $mute.off("mouseleave", false)
      $pan.off("mouseenter", false)
      $pan.off("mouseleave", false)
    else
      $mute.on("mouseenter", false)
      $mute.on("mouseleave", false)
      $pan.on("mouseentere", false)
      $pan.on("mouseleave", false)
})