import {
  Component,
  Input,
  OnChanges,
  OnInit,
  SimpleChanges,
  ViewChild
} from '@angular/core';
import { forkJoin, fromEvent, Subject } from 'rxjs';
import { take } from 'rxjs/operators';

/**
 * BomPartComponent
 */

@Component({
  selector: 'bom-health-n-risks',
  template: `
    <iframe
      #seWidget
      [hidden]="loading"
      src="https://widget.siliconexpert.com/riskwidget/"
      width="100%"
      height="100%"
      scrolling="no"
      frameborder="0"
      style="border:0"
    ></iframe>
    <wpt-loader *ngIf="loading"></wpt-loader>
  `,
  styles: [
    `
      :host {
        position: relative;
        height: 70px;
        width: 280px;
        overflow: hidden;
        border: 1px solid #dedede;
        margin: 3px;
      }
    `
  ]
})
export class HealthNRisksComponent implements OnInit, OnChanges {
  @Input() data: any;
  @ViewChild('seWidget', { static: true }) seWidget;
  private _dataLoaded$$: Subject<any> = new Subject<any>();

  public loading = true;

  constructor() {}

  ngOnInit(): void {
    forkJoin(
      fromEvent(this.seWidget.nativeElement, 'load').pipe(take(1)),
      this._dataLoaded$$
    ).subscribe(this._setWidgetData.bind(this));
  }

  ngOnChanges(changes: SimpleChanges): void {
    if (changes.data && !changes.data.firstChange) {
      this._dataLoaded$$.next(changes.data.currentValue);
      this._dataLoaded$$.complete();
    }
  }

  private _setWidgetData(bundle: any) {
    const [e, seData] = bundle;
    this.loading = false;
    if (seData.uploadedRowDTOList.length !== 0) {
      this.seWidget.nativeElement.contentWindow.postMessage(
        seData,
        'https://widget.siliconexpert.com'
      );
    }
  }
}