import { takeUntil } from "rxjs/operators";
import { Component, OnDestroy } from "@angular/core";
import { DomSanitizer, SafeHtml } from "@angular/platform-browser";
import { ReplaySubject, Subject } from "rxjs";
import { getOrDefault, WidgetConfig } from "../widget.configuration";
import {
  WidgetComponent,
  WidgetConfiguration,
  WidgetConfigure,
  WidgetId,
  WidgetInput,
} from "../widget.metadata";
import { NgUnsubscribe } from "../../ng-unsubscribe";
import { TranslateService } from "@ngx-translate/core";
import { BaseConfiguration } from "../widgetframe";

export interface HtmlContentConfiguration extends BaseConfiguration {
  /**
   * HTML code to be shown in the component
   */
  content?: string;
}

@WidgetComponent("nm-html-content")
@Component({
  selector: "nm-html-content",
  templateUrl: "./html-content.component.html",
  styleUrls: ["./html-content.component.scss"],
})
export class HtmlContentWidgetComponent implements OnDestroy {
  @WidgetId()
  public _id;

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

  /**
   * Sets HTML content.
   */
  @WidgetInput("contentInput")
  public contentInput: Subject<any> = new ReplaySubject<any>(1);

  public withHeader: boolean;
  public content: SafeHtml = "";
  private unsubscribe = NgUnsubscribe.create();

  constructor(
    public translateService: TranslateService,
    private sanitizer: DomSanitizer
  ) {}

  @WidgetConfigure()
  protected configureWidget(
    configuration: WidgetConfig<HtmlContentConfiguration>
  ) {
    this.withHeader = getOrDefault(
      configuration.configuration.withHeader,
      true
    );
    if (configuration.configuration["content"]) {
      this.content = this.sanitizer.bypassSecurityTrustHtml(
        configuration.configuration["content"]
      );
    }

    this.contentInput.pipe(takeUntil(this.unsubscribe)).subscribe((content) => {
      this.content = this.sanitizer.bypassSecurityTrustHtml(content);
    });
  }

  public ngOnDestroy(): void {
    this.unsubscribe.destroy();
  }
}