(() => {
  class Subscription {
    constructor(containerElm) {
      this.containerElm = containerElm;

      const subscribeButton = containerElm.querySelector('.js-subscribe-button');
      if (subscribeButton) {
        // remove class so we don't bind twice
        subscribeButton.classList.remove('js-subscribe-button');
        subscribeButton.addEventListener('click', this.toggleSubscription.bind(this));
      }
    }

    toggleSubscription(event) {
      const button = event.currentTarget;
      const buttonSpan = button.querySelector('span');
      if (!buttonSpan || button.classList.contains('disabled')) {
        return;
      }
      button.classList.add('disabled');

      const isSubscribed = buttonSpan.innerHTML.trim().toLowerCase() !== 'subscribe';
      const toggleActionUrl = this.containerElm.dataset.url;

      $.post(toggleActionUrl, () => {
        button.classList.remove('disabled');

        // hack to allow this to work with the issue boards Vue object
        if (document.querySelector('html').classList.contains('issue-boards-page')) {
          gl.issueBoards.boardStoreIssueSet(
            'subscribed',
            !gl.issueBoards.BoardsStore.detail.issue.subscribed,
          );
        } else {
          buttonSpan.innerHTML = isSubscribed ? 'Subscribe' : 'Unsubscribe';
        }
      });
    }

    static bindAll(selector) {
      [].forEach.call(document.querySelectorAll(selector), elm => new Subscription(elm));
    }
  }

  window.gl = window.gl || {};
  window.gl.Subscription = Subscription;
})();