import { Component, OnInit, ViewChild } from '@angular/core';
import { AccountComponent } from '../account/account.component';
import { Account } from '../data-objects';
import { ExtApiService } from '../ext-data-object-service';
import { MessageService } from '../message.service';

@Component({
  selector: 'app-ledger',
  templateUrl: './ledger.component.html',
  styleUrls: ['./ledger.component.css']
})
export class LedgerComponent implements OnInit {

  incomeAccount: Account
  incomeAccountId: number
  expenseAccount: Account
  expenseAccountId: number

  collapseIncomeDetails: boolean = false
  collapseExpenseDetails: boolean = false

  @ViewChild('incomeAccountComponent') incomeAccountComponent: AccountComponent
  @ViewChild('expenseAccountComponent') expenseAccountComponent: AccountComponent
  

  constructor(
    private extApiService: ExtApiService,
    private messageService: MessageService
  ) { }

  async getAccount(): Promise<void> {
    try {
      this.messageService.add("Trying to load ledger account")
      this.incomeAccount = await this.extApiService.getAccountByDescription('LedgerIncome')
      this.expenseAccount = await this.extApiService.getAccountByDescription('LedgerExpense')
      this.messageService.add("Account loaded")
    } catch (err) {
      this.messageService.add(JSON.stringify(err, undefined, 4))
    }
  }

  async ngOnInit(): Promise<void> {
    await this.getAccount()
    this.incomeAccountId = this.incomeAccount.id
    this.expenseAccountId = this.expenseAccount.id
  }

}