import Component from 'flarum/Component';
import Button from 'flarum/components/Button';
import icon from 'flarum/helpers/icon';

import SubscriptionMenuItem from 'flarum/subscriptions/components/SubscriptionMenuItem';

export default class SubscriptionMenu extends Component {
  init() {
    this.options = [
      {
        subscription: false,
        icon: 'star-o',
        label: app.translator.trans('flarum-subscriptions.forum.sub_controls.not_following_button'),
        description: app.translator.trans('flarum-subscriptions.forum.sub_controls.not_following_text')
      },
      {
        subscription: 'follow',
        icon: 'star',
        label: app.translator.trans('flarum-subscriptions.forum.sub_controls.following_button'),
        description: app.translator.trans('flarum-subscriptions.forum.sub_controls.following_text')
      },
      {
        subscription: 'ignore',
        icon: 'eye-slash',
        label: app.translator.trans('flarum-subscriptions.forum.sub_controls.ignoring_button'),
        description: app.translator.trans('flarum-subscriptions.forum.sub_controls.ignoring_text')
      }
    ];
  }

  view() {
    const discussion = this.props.discussion;
    const subscription = discussion.subscription();

    let buttonLabel = app.translator.trans('flarum-subscriptions.forum.sub_controls.follow_button');
    let buttonIcon = 'star-o';
    const buttonClass = 'SubscriptionMenu-button--' + subscription;

    switch (subscription) {
      case 'follow':
        buttonLabel = app.translator.trans('flarum-subscriptions.forum.sub_controls.following_button');
        buttonIcon = 'star';
        break;

      case 'ignore':
        buttonLabel = app.translator.trans('flarum-subscriptions.forum.sub_controls.ignoring_button');
        buttonIcon = 'eye-slash';
        break;

      default:
        // no default
    }

    return (
      <div className="Dropdown ButtonGroup SubscriptionMenu">
        {Button.component({
          className: 'Button SubscriptionMenu-button ' + buttonClass,
          icon: buttonIcon,
          children: buttonLabel,
          onclick: this.saveSubscription.bind(this, discussion, ['follow', 'ignore'].indexOf(subscription) !== -1 ? false : 'follow')
        })}

        <button className={'Dropdown-toggle Button Button--icon ' + buttonClass} data-toggle="dropdown">
          {icon('caret-down', {className: 'Button-icon'})}
        </button>

        <ul className="Dropdown-menu dropdown-menu Dropdown-menu--right">
          {this.options.map(props => {
            props.onclick = this.saveSubscription.bind(this, discussion, props.subscription);
            props.active = subscription === props.subscription;

            return <li>{SubscriptionMenuItem.component(props)}</li>;
          })}
        </ul>
      </div>
    );
  }

  saveSubscription(discussion, subscription) {
    discussion.save({subscription});
  }
}

@@ -1863,111 +1863,30 @@
     
-return (%0A      %3Cdiv className=%22Dropdown B
+const b
 utton
-Group SubscriptionMenu%22%3E%0A        %7BButton.component(%7B%0A    
+Props = %7B%0A
     
@@ -1949,28 +1949,24 @@
 lass,%0A      
-    
 icon: button
@@ -1971,20 +1971,16 @@
 onIcon,%0A
-    
       ch
@@ -2006,20 +2006,16 @@
 ,%0A      
-    
 onclick:
@@ -2134,21 +2134,830 @@
 w')%0A    
-    %7D
+%7D;%0A%0A    const preferences = app.session.user.preferences();%0A    const notifyEmail = preferences%5B'notify_newPost_email'%5D;%0A    const notifyAlert = preferences%5B'notify_newPost_alert'%5D;%0A%0A    if ((notifyEmail %7C%7C notifyAlert) && subscription === false) %7B%0A      buttonProps.title = app.translator.trans(notifyEmail%0A        ? 'flarum-subscriptions.forum.sub_controls.notify_email_tooltip'%0A        : 'flarum-subscriptions.forum.sub_controls.notify_alert_tooltip');%0A      buttonProps.config = element =%3E $(element).tooltip(%7B%0A        container: '.SubscriptionMenu',%0A        placement: 'bottom',%0A        delay: 250%0A      %7D);%0A    %7D else %7B%0A      buttonProps.config = element =%3E $(element).tooltip('destroy');%0A    %7D%0A%0A    return (%0A      %3Cdiv className=%22Dropdown ButtonGroup SubscriptionMenu%22%3E%0A        %7BButton.component(buttonProps
 )%7D%0A%0A    
@@ -3612,15 +3612,72 @@
 ption%7D);
+%0A%0A    this.$('.SubscriptionMenu-button').tooltip('hide');
 %0A  %7D%0A%7D%0A

Add a tooltip to the "Follow" button