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 { Locale } from "../../../../components/i18n";
import { map, takeUntil } from "rxjs/operators";
import { HttpClient } from "@angular/common/http";
import { NotificationsService } from "../../../../components/notifications/services/notifications.service";
import { TranslateService } from "@ngx-translate/core";
import * as uriTemplates_ from "uri-templates";
import { Observable } from "rxjs";
import { CurrentLocaleService } from "../../../../components/i18n/currentLocale.service";
import { DateTimeAdapter, OwlDateTimeIntl } from "ng-pick-datetime";
import { DateAdapter } from "@angular/material/core";

const uriTemplates = uriTemplates_;

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

  public uri: string;
  public contentLocale: string;
  public contentName: any;
  public contentType: any;
  public contentValidFrom: Date;
  public contentValidUntil: Date;
  public defaultLocale: string;
  public types: any[];
  public locales: Locale[];
  public isDateRangeValid: boolean = true;

  private typesUri: string;
  private typesUriWithLocale: string;

  constructor(
    public langSwitcherService: LangSwitcherService,
    public dialogRef: MatDialogRef<AddContentPopupComponent>,
    private authHttp: HttpClient,
    private _notificationService: NotificationsService,
    private _translateService: TranslateService,
    private owlDateTimeIntl: OwlDateTimeIntl,
    private dateAdapter: DateAdapter<Date>,
    private dateTimeAdapter: DateTimeAdapter<any>,
    private _currentLocaleService: CurrentLocaleService
  ) {
    langSwitcherService
      .getSupportedLanguages("/api/public/locales?type=ipim&sort=description")
      .subscribe((data: any) => {
        let localesTemp = [];
        if (data._embedded !== undefined) {
          for (const locale of data._embedded["locales"]) {
            localesTemp = localesTemp.concat(locale);
          }
        }
        this.locales = localesTemp;
        let dataLocale = this.dialogRef.componentInstance["dataLocale"];
        if (dataLocale) {
          this.contentLocale = dataLocale;
        } else {
          this.contentLocale =
            this.locales.find((local) => local.default).id ||
            this.locales[0].id;
        }
        this.constructTypesUri(this.contentLocale);
      });
  }

  constructTypesUri(selectedWidgetLocale) {
    if (!selectedWidgetLocale) {
      return;
    }
    let template = uriTemplates(this.typesUri);
    let uriParams = {};

    uriParams["locale"] = selectedWidgetLocale;

    this.typesUriWithLocale = template.fill(uriParams);
    this.getContentTypes();
  }

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

    this.authHttp
      .post(this.uri, content)
      .pipe(map((res) => <any>res))
      .subscribe((response) => {
        if (response.contentNo && response.contentNo !== "") {
          this._notificationService.success(response.title, response.messages);
          this.dialogRef.close(response.contentNo);
        } else {
          this._notificationService.error(response.title, response.messages);
          this.dialogRef.close();
        }
      });
  }

  onLocaleChange() {
    this.constructTypesUri(this.contentLocale);
  }

  getContentTypes() {
    this.perfomrGetContentTypesRequest(this.typesUriWithLocale).subscribe(
      (data: any) => {
        this.types = [];
        if (data._embedded !== undefined) {
          for (const type of data._embedded["content-type"]) {
            this.types = this.types.concat(type);
          }
        }
      }
    );
  }

  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;
    }
  }

  perfomrGetContentTypesRequest(url): Observable<any> {
    return this.authHttp.get(url, {}).pipe(map((res) => <any>res));
  }

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

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

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

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

  ngOnInit() {
    this._currentLocaleService
      .getCurrentLocale()
      .pipe(takeUntil(this.unsubscribe))
      .subscribe((selectedLocale) => {
        this.dateAdapter.setLocale(selectedLocale);
        this.dateTimeAdapter.setLocale(selectedLocale);
        this.owlDateTimeIntl.cancelBtnLabel =
          this._translateService.instant("button.cancel");
        this.owlDateTimeIntl.setBtnLabel =
          this._translateService.instant("button.accept");
      });
  }
}