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);
}

@@ -236,31 +236,28 @@
 mport %7B 
-componentLookup
+getEmberView
  %7D from 
@@ -355,16 +355,87 @@
 rrency';
+%0Aimport %7B addToolkitEmberHook %7D from 'toolkit/extension/utils/toolkit';
 %0A%0Aexport
@@ -513,36 +513,12 @@
 urn 
-isCurrentRouteAccountsPage()
+true
 ;%0A  
@@ -547,444 +547,317 @@
 nst 
+v
 al
-lBudgetMonthsViewModel = getAllBudgetMonthsViewModel();%0A    const subCategoryCalculations = allBudgetMonthsViewModel.get(%0A      'monthlySubCategoryBudgetCalculationsCollection'%0A    );%0A    const categoryLookupPrefix = %60mcbc/$%7BgetCurrentDate('YYYY-MM')%7D%60;%0A%0A    const GridSubComponent = componentLookup('register/grid-sub');%0A    GridSubComponent.constructor.reopen(%7B%0A      didRender: function() %7B%0A        didRender.call(this, sub
+ueColumns = %5B%0A      'register/grid-sub',%0A      'register/grid-row',%0A      'register/grid-scheduled',%0A      'register/grid-scheduled-sub',%0A      'register/grid-pending',%0A      'register/grid-split',%0A    %5D;%0A%0A    valueColumns.forEach(key =%3E %7B%0A      addToolkitEmberHook(this, key, 'didRender', this.add
 Category
 Calc
@@ -856,198 +856,144 @@
 gory
-Calculations, categoryLookupPrefix);%0A      %7D,%0A    %7D);%0A%0A    const GridRowComponent = componentLookup('register/grid-row');%0A    GridRowComponent.constructor.reopen(%7B%0A      didRender: fun
+Balance);%0A    %7D);%0A  %7D%0A%0A  addCategoryBalance(element) %7B%0A    const transaction = getEmberView(element.id, 'content');%0A    if (!transa
 ction
-(
 ) %7B%0A
@@ -1002,95 +1002,21 @@
     
-  didRender.call(this, subCategoryCalculations, categoryLookupPrefix)
+return
 ;%0A    
-  %7D,%0A    %7D);
+%7D
 %0A%0A  
@@ -1027,360 +1027,147 @@
 nst 
-GridScheduledComponent = componentLookup('register/grid-scheduled');%0A    GridScheduledComponent.constructor.reopen(%7B%0A      didRender: function() %7B%0A        didRender.call(this, subCategoryCalculations, categoryLookupPrefix);%0A      %7D,%0A    %7D);%0A  %7D%0A%0A  onRouteChanged() %7B%0A    if (!this.shouldInvoke()) return;%0A%0A    this.invoke();%0A  %7D%0A%7D%0A%0Afunction didRender(s
+allBudgetMonthsViewModel = getAllBudgetMonthsViewModel();%0A    const subCategoryCalculations = allBudgetMonthsViewModel.get(%0A      'monthlyS
 ubCa
@@ -1164,32 +1164,38 @@
 nthlySubCategory
+Budget
 Calculations, ca
@@ -1194,134 +1194,102 @@
 ions
-, categoryLookupPrefix) %7B%0A  const element = this.get('element'
+Collection'%0A    
 );%0A  
+  
 const 
-subC
+c
 ategory
-Id = this.get('content.subCategoryId');%0A
+LookupPrefix = %60mcbc/$%7BgetCurrentDate('YYYY-MM')%7D%60;%0A%0A 
   
+ 
 cons
@@ -1351,16 +1351,18 @@
 Id(%0A    
+  
 %60$%7Bcateg
@@ -1380,16 +1380,28 @@
 efix%7D/$%7B
+transaction.
 subCateg
@@ -1412,14 +1412,18 @@
 d%7D%60%0A
+  
   );%0A%0A
+  
   //
@@ -1495,16 +1495,18 @@
 kip it.%0A
+  
   if (!b
@@ -1525,16 +1525,18 @@
 eturn;%0A%0A
+  
   const 
@@ -1604,16 +1604,18 @@
 itle');%0A
+  
   const 
@@ -1633,16 +1633,50 @@
 %60$%7Btitle
+.replace(/%5C(Balance.*/, '').trim()
 %7D (Balan
@@ -1696,16 +1696,23 @@
 urrency(
+%0A      
 budgetDa
@@ -1718,28 +1718,28 @@
 ata.
-get('
 balance
-')
+%0A    
 )%7D)%60;%0A
+  
   $(
@@ -1807,10 +1807,14 @@
 Title);%0A
+  %7D%0A
 %7D%0A

Fix multiple category balances on hover