import { Component, ViewChild, ElementRef, AfterViewInit, OnDestroy } from '@angular/core';
import { Subscription } from 'rxjs';
import { DisaggResponse, Disaggregation, DisaggGraphView } from '@nshmp/disagg-d3/src/disagg';
import { Collection } from '@nshmp/disagg-d3/src/mvc';

import { AppService } from './app.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent implements AfterViewInit, OnDestroy {
  title = 'example';

  @ViewChild('example')
  el: ElementRef<HTMLElement>;

  sub: Subscription;

  constructor(private service: AppService) {}

  ngAfterViewInit(): void {
    this.sub = this.service.callDeagg$.subscribe((usageResponse) => {
      const response = new DisaggResponse(usageResponse.response.pop());
      const deaggs = response.get<Collection<Disaggregation>>('disaggregations').data();
      const collection = new Collection(deaggs);
      collection.select(collection.data()[0]);

      const view = new DisaggGraphView({
        el: this.el.nativeElement,
        collection,
      });
    });
  }

  ngOnDestroy(): void {
    this.sub.unsubscribe();
  }
}