import {Component, ElementRef, Input} from '@angular/core';
import { SafeResourceUrl, DomSanitizer } from '@angular/platform-browser';
//Usage :: <i-frame [url]="url" width="30%" height="250"></i-frame>`
@Component({
  selector: 'i-frame',
  template: `
    <div  *ngIf="!style" class="iframeContainer uk-height-large">
      <iframe  [src]="safeUrl"></iframe>
    </div>
    <div *ngIf="style"  class="iframeContainer" [ngStyle]="style">
      <iframe [src]="safeUrl"></iframe>
    </div>
  `
})
export class IFrameComponent {
  public safeUrl: SafeResourceUrl;
  @Input() url ;
  @Input() width: number;
  @Input() height: number;
  public style: any;
  
  constructor(private sanitizer: DomSanitizer) {
  }
  ngOnInit() {
    this.safeUrl = this.sanitizer.bypassSecurityTrustResourceUrl(this.url);
    if(this.width && this.height) {
      this.style = {
        "width.px": this.width,
        "height.px": this.height
      };
    } else if(this.height) {
      this.style = {
        "height.px": this.height
      };
    }
  }
}