context = window
MIX_MODES = context.JK.MIX_MODES

@SessionVolumeSettingsBtn = React.createClass({

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

  onInputsChanged: (sessionMixers) ->

    musicMixers = sessionMixers.mixers.simulatedMusicCategoryMixers[ MIX_MODES.PERSONAL ]
    chatMixers = sessionMixers.mixers.simulatedChatCategoryMixers[ MIX_MODES.PERSONAL ]

    @setState(musicMixers: musicMixers, chatMixers: chatMixers)

  getInitialState: () ->
    { musicMixers: null, chatMixers: null}

  render: () ->

    musicMixers = @state.musicMixers
    chatMixers = @state.chatMixers

    # find out if the first mixer on the music mixers or chat mixers is muted; if so, switch to a muted icon

    isMuted = musicMixers?.first.mute || chatMixers?.first.mute

    volumeIconClasses = classNames({
      'volume-icon' : true
      'enabled' : !isMuted
      'muted' : isMuted
    })

    `<a className="session-volume-settings button-grey left">
      <div className={volumeIconClasses}></div>
      VOLUME
    </a>`

  componentDidMount: () ->
    $root = $(this.getDOMNode())

    context.JK.interactReactBubble(
      $root,
      'SessionSelfVolumeHover',
      () =>
        {inputGroupMixers: @state.musicMixers, chatGroupMixers: @state.chatMixers}
    ,
      {width:470, positions:['right', 'bottom', 'left'], offsetParent:$root.closest('.screen')})

})