import { debounceTime, filter } from "rxjs/operators";
import { Component, ViewChild } from "@angular/core";
import { Subject, BehaviorSubject, Subscription, ReplaySubject } from "rxjs";
import { WidgetConfig } from "../widget.configuration";
import {
  WidgetComponent,
  WidgetConfiguration,
  WidgetConfigure,
  WidgetInput,
  WidgetOutput,
} from "../widget.metadata";
import { Link } from "../../components/hal/hal";
import {
  LocalStorageEntry,
  LocalStorageService,
} from "../../components/local-storage/local-storage.service";
import { themeLocalStorageConfig } from "../portal/config/config.component";

export interface IframeWidgetComponentConfiguration {
  /**
   * Sets iframe width @default("100%").
   */
  width?: any;

  /**
   * Sets iframe height @default("800px").
   */
  height?: any;

  /**
   * Sets iframe links.
   */
  links: any;
}

@WidgetComponent("nm-iframe")
@Component({
  selector: "nm-iframe",
  templateUrl: "./iframe.component.html",
  styleUrls: ["./iframe.component.scss"],
  host: { "(window:message)": "onMessage($event)" },
})
export class IframeWidgetComponent {
  /**
   * Sets the URL of the page to embed.
   */
  @WidgetInput()
  public url = new BehaviorSubject<any>(null);

  /**
   * Sets target URL parameters.
   */
  @WidgetInput("messages-input")
  public messagesInput = new Subject<any>();

  /**
   * Emits any received messages from target URL.
   */
  @WidgetOutput("messages-output")
  public messagesOutput = new Subject<any>();

  /**
   * Reloads target URL.
   */
  @WidgetInput()
  public reload = new ReplaySubject<any>(1);

  @WidgetConfiguration()
  public configuration: WidgetConfig<IframeWidgetComponentConfiguration>;

  @ViewChild("iframe", { static: true })
  iframe;

  private _widgetConfig: WidgetConfig;
  private _domain: string;
  private _subscriptionUrl: Subscription;
  private _subscriptionReload: Subscription;
  private _subscriptionMessagesInput: Subscription;

  private themeEntry: LocalStorageEntry;
  constructor(private localStorageService: LocalStorageService) {}

  @WidgetConfigure()
  protected configureWidget(
    configuration: WidgetConfig<IframeWidgetComponentConfiguration>
  ) {
    this.themeEntry = this.localStorageService.getLocalStorageEntryByConfig(
      themeLocalStorageConfig
    );
    this._widgetConfig = configuration;

    let links = configuration._links;
    let domain = <Link>links["domain"];
    if (domain && domain.href) {
      this._domain = domain.href;
    }

    let url = <Link>links["url"];
    if (url && url.href) {
      this.url.next(url.href);
    }
  }

  public onLoad(event: any) {
    let frame = this.iframe.nativeElement;
    if (this._subscriptionMessagesInput) {
      this._subscriptionMessagesInput.unsubscribe();
    }

    this._subscriptionMessagesInput = this.messagesInput
      .pipe(filter((message) => !!frame.src))
      .subscribe((params) => {
        let json = JSON.stringify(params);
        frame.contentWindow.postMessage(json, this._domain);
      });
  }

  public onMessage(event: any) {
    var msg = event.data;
    try {
      msg = JSON.parse(msg);
    } catch (ignore) {}

    let result = {
      url: this.url.getValue(),
      domain: this._domain,
      data: msg,
    };

    this.messagesOutput.next(result);
  }

  ngAfterViewInit() {
    let frame = this.iframe.nativeElement;
    this._subscriptionUrl = this.url
      .pipe(
        debounceTime(500),
        filter((value) => !!value)
      )
      .subscribe((url) => {
        frame.src = url;
      });
  }

  ngOnInit() {}

  ngOnDestroy() {
    if (this._subscriptionMessagesInput) {
      this._subscriptionMessagesInput.unsubscribe();
    }
    if (this._subscriptionUrl) {
      this._subscriptionUrl.unsubscribe();
    }

    if (this._subscriptionReload) {
      this._subscriptionReload.unsubscribe();
    }
  }
}