import { Component, OnInit } from '@angular/core';
import { InvoicesApiService } from '@fleio-api/billing/invoices/invoices-api.service';

export interface IInvoicesSummaryResponse {
  paid: number;
  unpaid: number;
  canceled: number;
  refunded: number;
}

@Component({
  selector: 'app-invoices-panel',
  templateUrl: './invoices-panel.component.html',
  styleUrls: ['./invoices-panel.component.scss']
})
export class InvoicesPanelComponent implements OnInit {
  tableData: {
    description: string;
    number: number;
  }[] = [];
  displayedColumns: string[] = ['description', 'number'];
  constructor(private invoicesApi: InvoicesApiService) { }

  ngOnInit() {
    this.invoicesApi.getSummary().subscribe((response: IInvoicesSummaryResponse) => {
      this.tableData.push({
        description: $localize`Paid`,
        number: response.paid
      });
      this.tableData.push({
        description: $localize`Unpaid`,
        number: response.unpaid
      });
      this.tableData.push({
        description: $localize`Canceled`,
        number: response.canceled
      });
      this.tableData.push({
        description: $localize`Refunded`,
        number: response.refunded
      });
    });
  }

}
