import { Component, OnDestroy } from "@angular/core";
import {
  WidgetConfig,
  getOrDefault,
} from "../../../../shared/widgets/widget.configuration";
import {
  WidgetComponent,
  WidgetId,
  WidgetConfiguration,
  WidgetConfigure,
  WidgetInput,
} from "../../../../shared/widgets/widget.metadata";
import { Subject } from "rxjs";
import { takeUntil } from "rxjs/operators";
import { NgUnsubscribe } from "../../../ng-unsubscribe";
import { BaseConfiguration } from "../../../widgets/widgetframe/widgetframe.component";

export interface IconTextConfiguration extends BaseConfiguration {
  /**
   * Sets the text displayed next to the icon
   */
  text: string;

  /**
   * Sets the icon name
   */
  icon: string;

  /**
   * Enables the display of svg icons @default(false)
   */
  svg?: boolean;
}

@WidgetComponent("nm-icontext")
@Component({
  selector: "nm-icontext",
  templateUrl: "./icontext.component.html",
  styleUrls: ["./icontext.component.scss"],
})
export class IconTextWidgetComponent implements OnDestroy {
  public title: string;
  public text: string;
  public icon: string;
  public hideWidget: boolean = false;
  public svg: boolean;

  private unsubscribe = NgUnsubscribe.create();

  /**
   * Shows / Hides the widget
   */
  @WidgetInput("hide")
  public hide: Subject<boolean> = new Subject<boolean>();

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

  @WidgetId()
  public _id;

  constructor() {}

  @WidgetConfigure()
  protected configureWidget(
    configuration: WidgetConfig<IconTextConfiguration>
  ) {
    this.title = configuration.configuration.title;
    this.text = configuration.configuration.text;
    this.icon = configuration.configuration.icon;
    this.svg = getOrDefault(configuration.configuration.svg, false);

    this.hide
      .asObservable()
      .pipe(takeUntil(this.unsubscribe))
      .subscribe((hide) => {
        this.hideWidget = hide;
      });
  }

  ngOnDestroy() {
    this.unsubscribe.destroy();
  }
}