import { OnDestroy, Component, OnInit } from "@angular/core";
import { MatDialogRef } from "@angular/material/dialog";
import { NgUnsubscribe } from "../../../../ng-unsubscribe";
import { LangSwitcherService } from "../../../../components/i18n/lang-switcher.service";
import { CurrentLocaleService, Locale } from "../../../../components/i18n";
import { HttpClient, HttpHeaders } from "@angular/common/http";
import { map } from "rxjs/operators";
import { NotificationsService } from "../../../../components/notifications/services/notifications.service";
import { WidgetframeService } from "../../../../widgets/widgetframe/widgetframe.service";
import { TranslateService } from "@ngx-translate/core";
import * as uriTemplates_ from "uri-templates";

const uriTemplates = uriTemplates_;

@Component({
  selector: "nm-add-content-text-popup",
  templateUrl: "./add-content-text-popup.component.html",
  styleUrls: ["./add-content-text-popup.component.scss"],
})
export class AddContentTextPopupComponent implements OnDestroy {
  private unsubscribe = NgUnsubscribe.create();

  public uri: string;
  public identifier: string;
  public textLocale: string;
  public uiLocale: string;
  public textOrder: any;
  public textType: any;
  public text: any;
  public defaultLocale: string;
  public textTypes: any[];
  public locales: Locale[];
  private textTypesUri: string;
  public isTypesEmpty: boolean = false;

  constructor(
    public langSwitcherService: LangSwitcherService,
    private currentLocaleService: CurrentLocaleService,
    public dialogRef: MatDialogRef<AddContentTextPopupComponent>,
    public _widgetFrameService: WidgetframeService,
    private authHttp: HttpClient,
    private _notificationService: NotificationsService,
    private _translateService: TranslateService
  ) {}

  ngOnInit(): void {
    this.langSwitcherService
      .getSupportedLanguages("/api/public/locales?type=ipim&sort=description")
      .subscribe((data: any) => {
        this.locales = data._embedded["locales"];
        this.textLocale = this.locales[0].id;
      });

    this.currentLocaleService.getCurrentLocale().subscribe((local: any) => {
      this.uiLocale = local;
      this.updateTypesLocale();
    });
  }

  onExternalModelChange(value) {
    this.text = value;
  }

  saveText() {
    let body = JSON.stringify([
      {
        locale: this.textLocale,
        order: this.textOrder,
        type: this.textType,
        text: this.text,
      },
    ]);
    let headers = new HttpHeaders();
    headers.append("Content-Type", "application/json");
    headers.append("Accept", "application/json");

    this.authHttp
      .post(this.uri, body, { headers: headers })
      .pipe(map((res) => <any>res))
      .subscribe((response) => {
        if (response.level !== "ERROR") {
          this._notificationService.success(
            this._translateService.instant(response.title),
            this._translateService.instant(response.message)
          );
          this.dialogRef.close(response.level);
        } else {
          this._notificationService.error(
            this._translateService.instant(response.title),
            this._translateService.instant(response.message)
          );
          this.dialogRef.close();
        }
      });
  }

  updateTypesLocale() {
    if (!this.uiLocale) {
      return;
    }

    let textTypesLink = uriTemplates(this.textTypesUri).fill({
      "data-locale": this.uiLocale,
      content: this.identifier,
    });

    this._widgetFrameService.getData(textTypesLink).subscribe((data: any) => {
      if (data._embedded !== undefined) {
        this.textTypes = data._embedded["content-text"];
        this.isTypesEmpty = this.textTypes.length == 0;
      }
    });
  }

  closePopup() {
    this.dialogRef.close();
  }

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