import { Component } from "@angular/core";
import { Subject } from "rxjs";
import { WidgetframeService } from "../../widgetframe/widgetframe.service";
import { getOrDefault, WidgetConfig } from "../../widget.configuration";
import {
  WidgetComponent,
  WidgetConfiguration,
  WidgetConfigure,
  WidgetId,
  WidgetInput,
  WidgetOutput,
} from "../../widget.metadata";

/**
 * No Widgetframe.
 *
 * Button of type mat-raised-button or mat-mini-fab
 */
@WidgetComponent("nm-hal-action-button")
@Component({
  selector: "nm-hal-action-button",
  templateUrl: "./hal-action-button.component.html",
  styleUrls: ["./hal-action-button.component.css"],
})
export class HalActionButtonComponent {
  @WidgetConfiguration()
  private configuration: WidgetConfig;

  // Triggered on button click
  @WidgetOutput("reset")
  private reset: Subject<any> = new Subject<any>();

  // Sets the button visible if input is true, a non-empty array or a number != 0
  @WidgetInput("visible")
  private visibleChannel: Subject<boolean | any[] | number> = new Subject<
    boolean | any[] | number
  >();

  // Payload that should be used if a hal-action gets triggered on click
  @WidgetInput("payload")
  private payloadSubect: Subject<any> = new Subject<any>();

  // Url that should be used to trigger a hal-action on click
  @WidgetInput("requesturl")
  public requestUrl: Subject<any> = new Subject<any>();

  @WidgetId()
  private _id: string;

  private hideAfterAction: boolean = false;
  public popover: string = "";
  public isVisible: boolean = true;
  public action: any;
  public icon: string;
  public cssClass: string = "";
  public payload: any;
  private payloadProperty: string;
  public customIcon = false;
  public buttonType = "mat-mini-fab";
  public title: string = "";
  public dark: boolean = false;

  constructor(private _widgetframeService: WidgetframeService) {
    this.visibleChannel.asObservable().subscribe((value) => {
      if (Array.isArray(value)) {
        this.isVisible = value.length > 0;
      } else {
        this.isVisible = !!value; //!!value => true gets true, false gets false, 0 gets false, !=0 gets true
      }
    });
    this.payloadSubect.asObservable().subscribe((payload) => {
      if (this.action.payloadProperty) {
        this.payload = [];
        payload.forEach((value) =>
          this.payload.push(value[this.action.payloadProperty])
        );
      } else {
        this.payload = payload;
      }
    });
    this.requestUrl
      .asObservable()
      .subscribe((url) => (this.action.action.href = url));
  }

  resetSearch() {
    this.reset.next(Date.now);
  }

  @WidgetConfigure()
  protected configureWidget(configuration: WidgetConfig) {
    if (configuration.configuration.hideAfterAction) {
      this.hideAfterAction = configuration.configuration.hideAfterAction;
    }
    if (configuration.configuration.infoText) {
      this.popover = configuration.configuration.infoText;
    }
    if (configuration.configuration.action) {
      this.action = configuration.configuration.action;
    } else {
      console.error(
        "No action configured for hal-action-button with id " + this._id
      );
    }
    if (configuration.configuration.icon) {
      this.icon = configuration.configuration.icon;
    }
    if (configuration.configuration.cssClass) {
      this.cssClass = configuration.configuration.cssClass;
    }
    if (configuration.configuration.customIcon) {
      this.customIcon = configuration.configuration.customIcon;
    }
    if (configuration.configuration.title) {
      this.title = configuration.configuration.title;
    }
    if (configuration.configuration.type) {
      this.buttonType = configuration.configuration.type;
    }
    if (configuration.configuration.dark) {
      this.dark = configuration.configuration.dark;
    }
    this.isVisible = getOrDefault(
      configuration.configuration.defaultVisible,
      true
    );
    if (configuration.configuration.addProgressBar) {
      this.action.action.configuration = this.action.action.configuration || {};
      this.action.action.configuration.addProgressBar =
        configuration.configuration.addProgressBar;
    }
  }

  getCssClass(): string {
    var cssClass = this.cssClass;
    if (this.dark) {
      cssClass += " btn-black";
    }
    return cssClass;
  }
}