import { Feature } from 'toolkit/extension/features/feature';
import {
  isCurrentRouteAccountsPage,
  getAllBudgetMonthsViewModel,
} from 'toolkit/extension/utils/ynab';
import { getCurrentDate } from 'toolkit/extension/utils/date';
import { componentLookup } from 'toolkit/extension/utils/ember';
import { formatCurrency } from 'toolkit/extension/utils/currency';

export class ShowCategoryBalance extends Feature {
  shouldInvoke() {
    return isCurrentRouteAccountsPage();
  }

  invoke() {
    const allBudgetMonthsViewModel = getAllBudgetMonthsViewModel();
    const subCategoryCalculations = allBudgetMonthsViewModel.get(
      'monthlySubCategoryBudgetCalculationsCollection'
    );
    const categoryLookupPrefix = `mcbc/${getCurrentDate('YYYY-MM')}`;

    const GridSubComponent = componentLookup('register/grid-sub');
    GridSubComponent.constructor.reopen({
      didRender: function() {
        didRender.call(this, subCategoryCalculations, categoryLookupPrefix);
      },
    });

    const GridRowComponent = componentLookup('register/grid-row');
    GridRowComponent.constructor.reopen({
      didRender: function() {
        didRender.call(this, subCategoryCalculations, categoryLookupPrefix);
      },
    });

    const GridScheduledComponent = componentLookup('register/grid-scheduled');
    GridScheduledComponent.constructor.reopen({
      didRender: function() {
        didRender.call(this, subCategoryCalculations, categoryLookupPrefix);
      },
    });
  }

  onRouteChanged() {
    if (!this.shouldInvoke()) return;

    this.invoke();
  }
}

function didRender(subCategoryCalculations, categoryLookupPrefix) {
  const element = this.get('element');
  const subCategoryId = this.get('content.subCategoryId');
  const budgetData = subCategoryCalculations.findItemByEntityId(
    `${categoryLookupPrefix}/${subCategoryId}`
  );

  // if there's no budget data (could be an income/credit category) skip it.
  if (!budgetData) return;

  const title = $('.ynab-grid-cell-subCategoryName', element).attr('title');
  const newTitle = `${title} (Balance: ${formatCurrency(budgetData.get('balance'))})`;
  $('.ynab-grid-cell-subCategoryName', element).attr('title', newTitle);
}

import { Feature } from 'toolkit/extension/features/feature';
import {
  isCurrentRouteAccountsPage,
  getAllBudgetMonthsViewModel,
} from 'toolkit/extension/utils/ynab';
import { getCurrentDate } from 'toolkit/extension/utils/date';
import { getEmberView } from 'toolkit/extension/utils/ember';
import { formatCurrency } from 'toolkit/extension/utils/currency';
import { addToolkitEmberHook } from 'toolkit/extension/utils/toolkit';

export class ShowCategoryBalance extends Feature {
  shouldInvoke() {
    return true;
  }

  invoke() {
    const valueColumns = [
      'register/grid-sub',
      'register/grid-row',
      'register/grid-scheduled',
      'register/grid-scheduled-sub',
      'register/grid-pending',
      'register/grid-split',
    ];

    valueColumns.forEach(key => {
      addToolkitEmberHook(this, key, 'didRender', this.addCategoryBalance);
    });
  }

  addCategoryBalance(element) {
    const transaction = getEmberView(element.id, 'content');
    if (!transaction) {
      return;
    }

    const allBudgetMonthsViewModel = getAllBudgetMonthsViewModel();
    const subCategoryCalculations = allBudgetMonthsViewModel.get(
      'monthlySubCategoryBudgetCalculationsCollection'
    );
    const categoryLookupPrefix = `mcbc/${getCurrentDate('YYYY-MM')}`;

    const budgetData = subCategoryCalculations.findItemByEntityId(
      `${categoryLookupPrefix}/${transaction.subCategoryId}`
    );

    // if there's no budget data (could be an income/credit category) skip it.
    if (!budgetData) return;

    const title = $('.ynab-grid-cell-subCategoryName', element).attr('title');
    const newTitle = `${title.replace(/\(Balance.*/, '').trim()} (Balance: ${formatCurrency(
      budgetData.balance
    )})`;
    $('.ynab-grid-cell-subCategoryName', element).attr('title', newTitle);
  }
}

Fix multiple category balances on hover