import {
  takeUntil,
  switchMap,
  filter,
  map,
  debounceTime,
} from "rxjs/operators";
import { Component, OnInit, Inject } from "@angular/core";
import { MatDialogRef } from "@angular/material/dialog";
import { WidgetComponent } from "../../../widget.metadata";
import { EditAttributeService } from "../../../../components/edit-attribute/edit-attribute.service";
import { MAT_DIALOG_DATA } from "@angular/material/dialog";
import { Subject, BehaviorSubject } from "rxjs";
import { ListService } from "../../../list/list.service";
import { ProgressbarService } from "../../../../components/progressbar/progressbar.service";
import { Result, ResultResource } from "../../../interfaces/list.interfaces";
import { NgUnsubscribe } from "../../../../ng-unsubscribe";
import * as uriTemplates_ from "uri-templates";
const uriTemplates = uriTemplates_;

@WidgetComponent("nm-add-relations-popup")
@Component({
  selector: "nm-add-relations-popup",
  templateUrl: "./add-relations-popup.component.html",
})
export class AddRelationsPopupComponent implements OnInit {
  public total: BehaviorSubject<number> = new BehaviorSubject(0);
  public cols: Subject<any[]> = new BehaviorSubject([]);

  public selectedRows: Result[] = [];
  public template: any;
  public profile: string;
  public actionsToAdd: string;
  public identifier: string = "";
  public configuration: any;
  public title: string;
  public inputChannel: Subject<any> = new Subject<any>();
  public results: Subject<Result[]> = new BehaviorSubject([]);
  private currentLink: string;
  private onChange: Subject<any> = new Subject<any>();

  private offset: number;
  public limit: number = 10;
  private sort: string;
  private filter: string[];

  private unsubscribe = NgUnsubscribe.create();
  private dataType: string;

  constructor(
    @Inject(MAT_DIALOG_DATA) public data: any,
    public dialogRef: MatDialogRef<AddRelationsPopupComponent>,
    private listService: ListService,
    private _progressbarService: ProgressbarService
  ) {}

  ngOnInit() {
    this.configuration = this.data["configuration"]["configuration"];
    this.profile = this.configuration["popup-configuration"]["default-profile"];

    this.cols.next(
      this.configuration["popup-configuration"]["profiles"][
        this.configuration["popup-configuration"]["default-profile"]
      ]
    );
    this.dataType = this.configuration["popup-configuration"]["dataType"];
    this.title = this.configuration["popup-configuration"]["title"];
    this.actionsToAdd = this.configuration["popup-configuration"]["actions"];
    this.identifier = this.configuration["popup-configuration"]["identifier"];

    this.inputChannel
      .asObservable()

      .subscribe((link) => {
        if (link === null) {
          this.total.next(null);
          this.results.next([]);
        } else {
          this.total.next(null);
          this.currentLink = link;
          this.offset = 0;
          this.onChange.next(new Date());
        }
      });

    this.onChange
      .pipe(
        debounceTime(500),
        map((trigger) => {
          let input = this.currentLink;
          let offset = this.offset || 0;
          let limit = this.limit || 10;
          let sort = this.sort || "";
          let filter = this.filter || [];

          if (!input) {
            return null;
          }

          let uriParams = Object.assign(
            {},
            { offset: offset },
            { limit: limit },
            { sort: sort },
            { filter: filter }
          );

          if (trigger === "reset") {
            return {};
          }

          if (trigger !== undefined) {
            uriParams.cache = (<Date>trigger).getTime();
            input += "{&cache}";
          }

          uriParams.template = input;
          return uriParams;
        }),
        filter((uriParams) => !!uriParams),
        map((uriParams) => {
          if (Object.keys(uriParams).length == 0) {
            return "";
          }
          this.template = uriTemplates((<any>uriParams).template);
          return this.template.fill(uriParams);
        }),
        switchMap((uri) => {
          if (uri === "") {
            return new Subject();
          }
          return this.listService.getTemplatedFilteredResults(uri);
        }),
        takeUntil(this.unsubscribe)
      )

      .subscribe(
        (data) => {
          this.mapResult(data);
          this._progressbarService.requestFinished();
        },
        (err) => {
          this._progressbarService.requestFinished();
        }
      );
    this.inputChannel.next(this.data["uri"]);
  }

  private mapResult(data: ResultResource) {
    if (data._embedded[this.dataType].length > 0) {
      for (var result of data._embedded[this.dataType]) {
        for (var attribute of result.attributes.default) {
          result[attribute.identifier] = attribute.value;
        }
      }
      this.results.next(data._embedded[this.dataType]);
    } else {
      this.results.next([]);
    }
    this.total.next(data.total);
  }
  closeDialog() {
    this.dialogRef.close();
  }

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