text: import { Feature } from 'toolkit/extension/features/feature';
  import { isCurrentRouteBudgetPage } from 'toolkit/extension/utils/ynab';
  import { getEmberView } from 'toolkit/extension/utils/ember';
  import { formatCurrency } from 'toolkit/extension/utils/currency';
  
  export class DisplayUpcomingAmount extends Feature {
    injectCSS() {
      return require('./index.css');
    }
  
    shouldInvoke() {
      return isCurrentRouteBudgetPage();
    }
  
    invoke() {
      $('.toolkit-activity-upcoming').removeClass('.toolkit-activity-upcoming');
      $('.toolkit-activity-upcoming-amount').remove();
  
      $('.budget-table-row.is-sub-category').each((_, element) => {
        const category = getEmberView(element.id, 'category');
        if (!category) {
          return;
        }
  
        const { monthlySubCategoryBudgetCalculation, subCategory } = category;
        if (
          monthlySubCategoryBudgetCalculation &&
          monthlySubCategoryBudgetCalculation.upcomingTransactions
        ) {
          let activity = $('.budget-table-cell-activity', element);
          activity.addClass('toolkit-activity-upcoming');
  
          let upcoming = $('<div>', {
            class: 'toolkit-activity-upcoming-amount currency',
            title: `Total upcoming transaction amount in this month for ${subCategory.get('name')}`,
            text: formatCurrency(monthlySubCategoryBudgetCalculation.upcomingTransactions),
          });
  
          let moneyMoves = $('.budget-table-cell-category-moves', activity);
          if (moneyMoves.length === 0) {
            // Shouldn't happen as of time of writing, even when not applicable the element exists
            // Included only to make feature slightly less brittle
            activity.prepend(upcoming);
          } else {
            moneyMoves.after(upcoming);
          }
        }
      });
    }
  
    onRouteChanged() {
      if (!this.shouldInvoke()) return;
      this.invoke();
    }
  }
  