import { takeUntil, map, filter } from "rxjs/operators";
import {
  Component,
  OnDestroy,
  ViewChild,
  ElementRef,
  Renderer2,
} from "@angular/core";
import { Subject } from "rxjs";
import { WidgetframeService } from "../widgetframe/widgetframe.service";
import { WidgetConfig } from "../widget.configuration";
import {
  WidgetComponent,
  WidgetConfigure,
  WidgetInput,
  WidgetOutput,
} from "../widget.metadata";
import { NgUnsubscribe } from "../../ng-unsubscribe";
import { ProgressbarService } from "../../components/progressbar/progressbar.service";
import { HalService } from "../../components/hal/index";
import { CustomNotificationService } from "../../components/notification/customnotification.service";

import { Action } from "../../components/hal/index";

@WidgetComponent("nm-edit-footer")
@Component({
  selector: "nm-edit-footer",
  templateUrl: "./edit-footer.component.html",
  styleUrls: ["./edit-footer.component.scss"],
})
export class EditFooterWidgetComponent implements OnDestroy {
  @ViewChild("actionButton", { read: ElementRef, static: true })
  actionButton: ElementRef;

  @WidgetInput()
  public payload = new Subject<any>();

  @WidgetInput()
  public actionStream = new Subject<any>();

  @WidgetInput()
  public storeEvent = new Subject<any>();

  @WidgetOutput()
  public reload = new Subject<any>();

  public action: Action;

  public actionName: String = "";

  public isDisabled: Boolean = false;

  public icon: string;
  public customIcon = false;

  private unsubscribe = NgUnsubscribe.create();

  constructor(
    private _widgetframeService: WidgetframeService,
    private renderer: Renderer2,
    private _halService: HalService,
    private _notificationService: CustomNotificationService,
    public _progressbarService: ProgressbarService
  ) {}

  @WidgetConfigure()
  protected configureWidget(configuration: WidgetConfig) {
    this.actionName = configuration.configuration["action-name"];
    this.icon = configuration.configuration["icon"];

    if (configuration.configuration["customIcon"]) {
      this.customIcon = configuration.configuration["customIcon"];
    }
    this.isDisabled = true;
    this.storeEvent.subscribe((storeEvent) => {
      this.actionButton.nativeElement.click();
    });

    this.payload.subscribe((data) => {
      if (data != null) {
        this.isDisabled = false;
      } else {
        this.isDisabled = true;
      }
    });
    this.actionStream.subscribe((data) => {
      this.action = data;
    });

    this._halService
      .getActionEvents()
      .pipe(
        filter((event) => event.name === this.actionName),
        map((event) => (<any>event).response),
        takeUntil(this.unsubscribe)
      )
      .subscribe(
        (resp) => {
          if (resp.message !== undefined) {
            if (resp.level === "ERROR") {
              this._notificationService.create(
                resp.title,
                resp.message,
                resp.level
              );
              this._progressbarService.requestFinished();
              if (configuration.configuration["trigger-reload"]) {
                this.reload.next(new Date());
              }
            }
          }
          this.payload.next(null);
          this._notificationService.fromResponse(resp);
          this._progressbarService.requestFinished();
          if (configuration.configuration["trigger-reload"]) {
            this.reload.next(new Date());
          }
        },
        (err) => {
          this._notificationService.create(err.title, err.message, "error");
          this._progressbarService.requestFinished();
          if (configuration.configuration["trigger-reload"]) {
            this.reload.next(new Date());
          }
        }
      );
  }

  onClick() {
    if (!this.isDisabled) {
      this.isDisabled = true;
      this._progressbarService.addRequest();
    }
  }

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