import { Component, ElementRef, Input, OnInit, ViewChild, OnChanges } from '@angular/core';

import { TokenService } from './token.service';

@Component({
  selector: 'rss-powerbi-report',
  template: '<iframe #iframe></iframe>',
  styleUrls: ['./powerbi-report.component.scss']
})

export class PowerBiReportComponent implements OnInit, OnChanges {
  @Input() report: any;
  @Input() url: string;

  @ViewChild('iframe') iframe: ElementRef;

  constructor(private tokenService: TokenService) {
  }

  ngOnInit() { }

  ngOnChanges(changes: any) {
    this.loadReport();
  }

  loadReport() {
    let el = this.iframe.nativeElement;

    this.tokenService.getPowerBiToken(this.url, this.report.wcId, this.report.wid, this.report.rid)
      .subscribe(res => {
        el.src = `https://embedded.powerbi.com/appTokenReportEmbed?reportId=${this.report.rid}`;

        let msg = {
          action: 'loadReport',
          accessToken: res.token
        };

        el.onload = () => {
          el.contentWindow.postMessage(JSON.stringify(msg), '*');
        };
      });
  }
}