import {
  combineLatest as observableCombineLatest,
  Subject,
  ReplaySubject,
  BehaviorSubject,
} from "rxjs";

import { map, filter, takeUntil, distinctUntilChanged } from "rxjs/operators";
import {
  Component,
  ElementRef,
  OnDestroy,
  ViewChild,
  Renderer2,
} from "@angular/core";
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 { MatDialog } from "@angular/material/dialog";

import { Action, HalService } from "../../../../components/hal/index";
import { CustomNotificationService } from "../../../../components/notification/customnotification.service";
import { EditFooterTextgenPopupComponent } from "./edit-footer-textgen-popup.component";

import { ProgressbarService } from "../../../../components/progressbar/progressbar.service";

import * as uriTemplates_ from "uri-templates";
import {
  LocalStorageEntry,
  LocalStorageService,
} from "../../../../components/local-storage/local-storage.service";
import {
  DeletionMode,
  Scope,
} from "../../../../components/local-storage/local-storage-constants";

const uriTemplates = uriTemplates_;

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

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

  @WidgetInput()
  public targets = new ReplaySubject<any>(1);

  @WidgetOutput()
  public selectedValue = new ReplaySubject<any>(1);

  @WidgetInput()
  public selectedDataLocale = new ReplaySubject<any>(1);

  @WidgetInput()
  public isDisabled = new BehaviorSubject<boolean>(false);

  @WidgetInput()
  public resetWidgets = new ReplaySubject<any>(1);

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

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

  public action: Action;
  public selection: string;
  public options = [];
  public productNoValue: string;

  public localStorageKey: string;
  private selectionEntry: LocalStorageEntry;
  public actionName: string = "";
  private unsubscribe = NgUnsubscribe.create();
  private payloadstring: any = {};
  private selectedLocaleString: string;

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

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

    this.selectionEntry = this.localStorageService.getLocalStorageEntry(
      configuration.configuration["local-storage-key"],
      Scope.GLOBAL,
      DeletionMode.LOGIN
    );
    this.productNo.pipe(takeUntil(this.unsubscribe)).subscribe((productNo) => {
      this.productNoValue = productNo;
      this._widgetframeService
        .getData(configuration.configuration["remote-data-url"])
        .subscribe((response) => {
          if (!response) {
            return;
          }

          this.options = [];

          for (var entry of response._embedded[
            configuration.configuration["remote-data-dataType"]
          ]) {
            let option = {};
            option["value"] =
              entry[configuration.configuration["remote-data-value"]];
            option["prompt"] =
              entry[configuration.configuration["remote-data-prompt"]];
            option["action"] =
              entry["_actions"][configuration.configuration["action-name"]];
            let template = uriTemplates(option["action"].href);
            let uriParams = {};
            uriParams["productNo"] = this.productNoValue;

            option["action"].href = template.fill(uriParams);
            this.options.push(option);
          }
          if (this.selectionEntry.exists()) {
            this.selection = this.selectionEntry.value;
          }
          this.onChange();
        });
    });

    let source = observableCombineLatest(
      this.targets.asObservable().pipe(distinctUntilChanged()),
      this.selectedDataLocale.asObservable().pipe(distinctUntilChanged()),
      function (targets, selectedDataLocale) {
        let pl = {};
        pl["targets"] = targets;
        pl["locale"] = selectedDataLocale;
        return pl;
      }
    ).subscribe((pl) => {
      this.payload.next(pl);
      this.payloadstring = pl;
      this.onChange();
    });

    this.selectedValue.next(this.selection);

    this.selectedDataLocale.subscribe((data) => {
      this.selectedLocaleString = data;
    });

    this.productNo.subscribe((data) => {
      this.action = data;
    });

    this._halService
      .getActionEvents()
      .pipe(
        filter((event) => event.name === this.actionName),
        map((event) => (<any>event).response.body),
        takeUntil(this.unsubscribe)
      )
      .subscribe((resp) => {
        this._progressbarService.requestFinished();
        this.isDisabled.next(true);
        if (resp.level === '"SUCCESS"') {
          this._notificationService.fromJson(resp);
        }
        this.showPreview(resp["previews"]);
      });
  }
  onChange() {
    if (this.selection != "") {
      this.selectionEntry.value = this.selection;
      this.selectedValue.next(this.selection);

      let selectedOption = this.options.filter(
        (option) => option["value"] == this.selection
      );

      if (selectedOption[0] != undefined) {
        this.action = selectedOption[0]["action"];
        this.action.payload = Object.assign(
          this.action.payload,
          this.payloadstring
        );
      }
    }
  }

  actionSend() {
    this._progressbarService.addRequest();
    this.isDisabled.next(true);
  }

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

  showPreview(previewstoDisplay) {
    let dialogRef = this.dialog.open(EditFooterTextgenPopupComponent, {
      width: "900px",
      height: "700px",
      disableClose: true,
      data: {
        previews: previewstoDisplay,
      },
    });

    dialogRef.afterClosed().subscribe((confirmed) => {
      this.reloadWebtextData.next(new Date());
      this.isDisabled.next(false);
    });
  }
}