import {AfterViewInit, Component, ElementRef, ViewChild} from '@angular/core';
import {nshmpHaz} from '@ghsc/nshmp-web-utils';
import {
  DisaggGraphView,
  Disaggregation,
  DisaggResponse,
} from '@nshmp/disagg-d3/src/disagg';
import {Collection} from '@nshmp/disagg-d3/src/mvc';

import disagg from '../assets/disagg-response.json';

@Component({
  selector: 'app-root',
  styleUrls: ['./app.component.scss'],
  templateUrl: './app.component.html',
})
export class AppComponent implements AfterViewInit {
  title = 'Disaggregation';
  disaggCollection = new Collection<Disaggregation>([]);
  data = disagg.response as nshmpHaz.disaggService.DisaggResponseData;
  view: DisaggGraphView;

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

  constructor() {}

  ngAfterViewInit(): void {
    const response = new DisaggResponse(this.data);
    const disaggs = response
      .get<Collection<Disaggregation>>('disaggregations')
      .data();
    this.disaggCollection.addAll(disaggs);
    this.disaggCollection.select(this.disaggCollection.data()[0]);

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

  bounds(data: nshmpHaz.disaggService.DisaggResponseData): number[][] {
    const totalComponent = data.disaggs[0].data.find(
      d => d.component === 'Total'
    );
    return DisaggGraphView.calculateBounds(totalComponent.data);
  }

  onComponentChange(component: string): void {
    const componentData = this.disaggCollection
      .data()
      .find(d => d.get('component') === component);

    this.disaggCollection.select(componentData);
  }
}