import { Component, OnDestroy, OnInit } from "@angular/core";
import { ActivatedRoute } from "@angular/router";
import { concatMap, Subject, takeUntil } from "rxjs";

import { OrganizationApiServiceAbstraction } from "@bitwarden/common/abstractions/organization/organization-api.service.abstraction";
import { BillingHistoryResponse } from "@bitwarden/common/models/response/billing-history.response";

@Component({
  selector: "app-org-billing-history-view",
  templateUrl: "organization-billing-history-view.component.html",
})
export class OrgBillingHistoryViewComponent implements OnInit, OnDestroy {
  loading = false;
  firstLoaded = false;
  billing: BillingHistoryResponse;
  organizationId: string;

  private destroy$ = new Subject<void>();

  constructor(
    private organizationApiService: OrganizationApiServiceAbstraction,
    private route: ActivatedRoute
  ) {}

  async ngOnInit() {
    this.route.params
      .pipe(
        concatMap(async (params) => {
          this.organizationId = params.organizationId;
          await this.load();
          this.firstLoaded = true;
        }),
        takeUntil(this.destroy$)
      )
      .subscribe();
  }

  ngOnDestroy() {
    this.destroy$.next();
    this.destroy$.complete();
  }

  async load() {
    if (this.loading) {
      return;
    }
    this.loading = true;
    this.billing = await this.organizationApiService.getBilling(this.organizationId);
    this.loading = false;
  }
}