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

import { map, takeUntil } from "rxjs/operators";
import { Component } from "@angular/core";
import { WidgetframeService } from "../../../widgetframe/widgetframe.service";
import { WidgetConfig } from "../../../widget.configuration";
import { NgUnsubscribe } from "../../../../ng-unsubscribe";
import { HttpClient, HttpHeaders } from "@angular/common/http";
import { MatDialog, MatDialogRef } from "@angular/material/dialog";
import { Injector } from "@angular/core";
import { ConfirmationDialogComponent } from "../../../../components/dialog";
import { NotificationsService } from "../../../../components/notifications/services/notifications.service";
import { TranslateService } from "@ngx-translate/core";

import {
  WidgetComponent,
  WidgetId,
  WidgetConfiguration,
  WidgetConfigure,
  WidgetInput,
  WidgetOutput,
} from "../../../widget.metadata";
import * as uriTemplates_ from "uri-templates";
import { Router, ActivatedRoute } from "@angular/router";
import {
  LocalStorageEntry,
  LocalStorageService,
} from "../../../../components/local-storage/local-storage.service";
import {
  Scope,
  DeletionMode,
} from "../../../../components/local-storage/local-storage-constants";
const uriTemplates = uriTemplates_;

declare var $: any;

/**
 * Used in iPIM Buy.
 * No Widgetframe.
 *
 * Button of type mat-raised-button
 */
@WidgetComponent("nm-content-overview")
@Component({
  selector: "nm-content-overview",
  templateUrl: "./overview.component.html",
  styleUrls: ["./overview.component.scss"],
})
export class OverviewWidgetComponent {
  public title: string;
  public identifier: string;
  public contentName: string;
  public contentType: any;
  public contentValidFrom: Date;
  public contentValidUntil: Date;
  public contentLocale: string;
  public overviewData: any = null;
  public infoText: string;
  public infoTitle: string;
  public wikiLink: string;
  public relationURL: string;
  public contentTypesLink: string;
  public dataChanged = false;
  public types: any[];
  public assetHref = new ReplaySubject<any>(1);
  public isDateRangeValid: boolean = true;
  public saveLink: string;

  private autoSearchLocalStorage: LocalStorageEntry;
  private contentNoLocalStorage: LocalStorageEntry;
  private openRelationLocalStorage: LocalStorageEntry;

  public dialog: MatDialog;

  @WidgetId()
  public _id;

  @WidgetConfiguration()
  public configuration: WidgetConfig;

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

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

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

  @WidgetInput()
  public selectedUiLocale: BehaviorSubject<any> = new BehaviorSubject<any>(
    null
  );

  @WidgetInput("reset")
  public resetChannel = new Subject<any>();

  @WidgetOutput("relation")
  private openRelation: Subject<any> = new ReplaySubject<any>(1);

  @WidgetInput()
  public reload = new BehaviorSubject<any>(new Date());

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

  private unsubscribe = NgUnsubscribe.create();

  constructor(
    private _widgetframeService: WidgetframeService,
    private authHttp: HttpClient,
    private _notificationService: NotificationsService,
    private _localStorageService: LocalStorageService,
    private _translateService: TranslateService,
    injector: Injector,
    private router: Router,
    private route: ActivatedRoute
  ) {
    this.dialog = injector.get(MatDialog);
  }

  @WidgetConfigure()
  protected configureWidget(configuration: WidgetConfig) {
    this.title = configuration.configuration["title"];
    this.infoText = configuration.configuration["infoText"];
    this.infoTitle = configuration.configuration["infoTitle"];
    this.wikiLink = this.configuration.configuration["wikiLink"];
    this.relationURL = this.configuration.configuration["relationURL"];
    this.contentTypesLink = configuration._links["contentTypes"]["href"];
    this.saveLink = configuration.configuration["update-definition"];

    let overviewHref = configuration._links["overview"]["href"];
    let headerTemplate = uriTemplates(overviewHref);

    observableCombineLatest(
      this.contentNo.asObservable(),
      this.selectedLocale.asObservable(),
      this.reload.asObservable(),
      (selectedContent, selectedLocale) => {
        let params = {};
        params["content"] = selectedContent[0];
        params["locale"] = selectedLocale;
        return params;
      }
    ).subscribe((params) => {
      if (!this.saveDisabled()) {
        this.confirmSave();
      } else if (params["content"] && params["locale"]) {
        if (this.dataChanged) {
          this._notificationService.alert(
            this._translateService.instant(
              "app.iPimContentMGT.frontend.alert.discard-changes.title"
            ),
            this._translateService.instant(
              "app.iPimContentMGT.frontend.alert.discard-changes.message"
            )
          );
          this.dataChanged = false;
        }
      } else if (this.dataChanged) {
        this._notificationService.alert(
          this._translateService.instant(
            "app.iPimContentMGT.frontend.alert.discard-changes.title"
          ),
          this._translateService.instant(
            "app.iPimContentMGT.frontend.alert.discard-changes.message"
          )
        );
        this.dataChanged = false;
      }

      if (params == null || params["content"] == null) {
        this.resetOverviewData();
        return;
      }

      if (params["locale"] == null) {
        return;
      }

      if (this.saveDisabled()) {
        let contentNo = params["content"]["identifier"];
        let widgetLocale = params["locale"];

        this.getContentTypes(widgetLocale);

        let assetHref1 = uriTemplates(
          configuration._links["assets"]["href"]
        ).fill({ content: contentNo, "data-locale": widgetLocale });

        this.assetHref.next(assetHref1);

        let href = headerTemplate.fill({
          content: contentNo,
          "data-locale": widgetLocale,
        });
        this._widgetframeService.getData(href).subscribe(
          (data) => {
            this.mapToOverview(data, contentNo, widgetLocale);
          },
          (error) => {
            this.overviewData = null;
          }
        );
      }
    });

    this.resetChannel
      .asObservable()
      .pipe(takeUntil(this.unsubscribe))
      .subscribe((reset) => {
        this.dataChanged = false;
        this.getContentTypes(this.contentLocale);
        this.resetOverviewData();
        this.contentNo.next([]);
      });
  }

  openLink(contentNo, event) {
    event.stopPropagation();
    this.autoSearchLocalStorage = this._localStorageService.getLocalStorageEntry(
      "autoSearch",
      Scope.GLOBAL,
      DeletionMode.LOGIN
    );
    this.contentNoLocalStorage = this._localStorageService.getLocalStorageEntry(
      "content-searchInput",
      Scope.GLOBAL,
      DeletionMode.LOGIN
    );
    this.openRelationLocalStorage = this._localStorageService.getLocalStorageEntry(
      "content-openRelation",
      Scope.GLOBAL,
      DeletionMode.LOGIN
    );

    this.autoSearchLocalStorage.value = "true";
    this.contentNoLocalStorage.value = contentNo;
    this.openRelationLocalStorage.value = "true";

    this.router.navigate([this.relationURL], { relativeTo: this.route });
    this.openRelation.next(contentNo);
    return false;
  }

  private getContentTypes(selectedWidgetLocale: string): void {
    if (!selectedWidgetLocale) {
      return;
    }

    let template = uriTemplates(this.contentTypesLink);
    let uriParams = {};

    uriParams["locale"] = selectedWidgetLocale;
    this.contentLocale = selectedWidgetLocale;

    this.types = [];
    this.authHttp
      .get(template.fill(uriParams), {})
      .pipe(map((res) => <any>res))
      .subscribe((data: any) => {
        if (data && data._embedded !== undefined) {
          for (const type of data._embedded["content-type"]) {
            this.types = this.types.concat(type);
          }
        }
      });
  }

  resetValidFromDateTime(event) {
    event.stopPropagation();
    this.contentValidFrom = null;
    this.dataChanged = true;
    this.validateDateRange();
  }

  resetValidUntilDateTime(event) {
    event.stopPropagation();
    this.contentValidUntil = null;
    this.dataChanged = true;
    this.validateDateRange();
  }

  validateDateRange() {
    if (this.contentValidUntil) {
      this.contentValidUntil.setSeconds(0, 0);
    }
    if (this.contentValidFrom) {
      this.contentValidFrom.setSeconds(0, 0);
    }
    if (this.contentValidUntil && this.contentValidFrom) {
      this.isDateRangeValid = this.contentValidUntil > this.contentValidFrom;
    } else {
      this.isDateRangeValid = true;
    }
  }

  private mapToOverview(data: any, contentNo: any, widgetLocale: any) {
    console.log("data", data);
    this.overviewData = data;
    this.identifier = contentNo;
    this.contentName = this.overviewData.description;
    this.contentType = this.overviewData.type;

    if (this.overviewData.validFrom) {
      const date = new Date(this.overviewData.validFrom);
      date.setHours(
        date.getHours(),
        date.getMinutes() - date.getTimezoneOffset(),
        0,
        0
      );
      this.contentValidFrom = date;
    } else {
      this.contentValidFrom = null;
    }

    if (this.overviewData.validUntil) {
      const date = new Date(this.overviewData.validUntil);
      date.setHours(
        date.getHours(),
        date.getMinutes() - date.getTimezoneOffset(),
        0,
        0
      );
      this.contentValidUntil = date;
    } else {
      this.contentValidUntil = null;
    }

    this.validateDateRange();
  }

  private resetOverviewData() {
    this.overviewData = null;
    this.contentName = null;
    this.contentType = null;
    this.contentValidFrom = null;
    this.contentValidUntil = null;

    this.identifier = "";
  }

  definitionChanged(): void {
    this.dataChanged = true;
  }

  saveDisabled(): boolean {
    return (
      !this.dataChanged ||
      this.contentName.length == 0 ||
      !this.isDateRangeValid
    );
  }

  confirmSave(): void {
    let dialogRef = this.openConfirmationDialog(
      "app.iPimContentMGT.frontend.content.save",
      "app.iPimContentMGT.frontend.content.save.message"
    );
    dialogRef.afterClosed().subscribe((confirmed) => {
      if (confirmed) {
        this.saveDefinition();
        this.dataChanged = false;
      } else {
        this.dataChanged = false;
        this.reload.next("reload");
      }
    });
  }

  private openConfirmationDialog(
    messageTitle: string,
    messageDescription: string
  ): MatDialogRef<ConfirmationDialogComponent> {
    let dialogRef = this.dialog.open(ConfirmationDialogComponent);
    dialogRef.componentInstance["title"] = this._translateService.instant(
      messageTitle
    );
    dialogRef.componentInstance["message"] = this._translateService.instant(
      messageDescription
    );
    dialogRef.componentInstance[
      "buttonAcceptTitle"
    ] = this._translateService.instant("button.accept");
    dialogRef.componentInstance[
      "buttonCancelTitle"
    ] = this._translateService.instant("button.cancel");

    return dialogRef;
  }

  private saveDefinition(): void {
    let template = uriTemplates(this.saveLink);
    let uriParams = {};

    uriParams["content"] = this.identifier;
    uriParams["ui-locale"] = this.selectedUiLocale.value;

    let content = JSON.stringify({
      locale: this.contentLocale,
      description: this.contentName,
      type: this.contentType,
      validFrom: this.contentValidFrom,
      validUntil: this.contentValidUntil,
    });

    let headers = new HttpHeaders();
    headers.append("Content-Type", "application/json");
    headers.append("Accept", "application/json");

    this.authHttp
      .put(template.fill(uriParams), content, { headers: headers })
      .pipe(map((res) => <any>res))
      .subscribe(
        (response) => {
          if (response.contentNo && response.contentNo !== "") {
            this._notificationService.success(
              response.title,
              response.messages
            );
            this.isDefinitionSaved.next(true);
          } else {
            this._notificationService.error(response.title, response.messages);
          }
          this.reload.next("reload");
          this.dataChanged = false;
        },
        (err) => {
          let errorResponse = err.error;
          this._notificationService.error(
            errorResponse.error,
            errorResponse.message
          );
          this.dataChanged = false;
          this.isDefinitionSaved.next(true);
        }
      );
  }

  ngOnInit() {}
}