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

import { map, mergeMap, distinctUntilChanged } from "rxjs/operators";
import { Component, ViewChild, ElementRef } from "@angular/core";
import {
  DomSanitizer,
  SafeStyle,
  SafeResourceUrl,
} from "@angular/platform-browser";
import { WidgetframeService } from "../../widgetframe/widgetframe.service";
import { WidgetConfig } from "../../widget.configuration";
import { UtilService } from "../../../components/util";
import {
  WidgetComponent,
  WidgetId,
  WidgetConfiguration,
  WidgetConfigure,
  WidgetInput,
  WidgetOutput,
} from "../../widget.metadata";
import * as uriTemplates_ from "uri-templates";
const uriTemplates = uriTemplates_;
declare var jQuery: any;
declare var contextPath: string;

@WidgetComponent("nm-asset-details-head")
@Component({
  selector: "nm-asset-details-head",
  templateUrl: "./head-assetdetails.component.html",
  styleUrls: ["./head-assetdetails.component.scss"],
})
export class HeaderAssetDetailsWidgetComponent {
  public cols: any[];
  public header: any;
  public profiles: any[];
  public asset: any[];
  public manufacturerImage: any = "";
  public assetHref: string;
  public backgroundImage: string = "";
  public videoUrl: string = "";
  public selectedLocale: string;

  @ViewChild("gallery")
  private gallery: ElementRef;

  @WidgetId()
  public _id;

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

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

  @WidgetConfiguration()
  public configuration: WidgetConfig;

  constructor(private _widgetframeService: WidgetframeService) {
    this.header = {};
  }

  @WidgetConfigure()
  protected configureWidget(configuration: WidgetConfig) {
    let headerHref = configuration._links["asset"]["href"];
    let exportProfilesHref = configuration._links["export-profiles"]["href"];

    let headerTemplate = uriTemplates(headerHref);
    let exportProfilesTemplate = uriTemplates(exportProfilesHref);

    observableCombineLatest(
      this.assetTitle.asObservable().pipe(distinctUntilChanged()),
      this.reload.asObservable(),
      (assetNo, reloadEvent) => assetNo
    )
      .pipe(
        map((number) => exportProfilesTemplate.fill({ asset: number })),
        mergeMap((href) => this._widgetframeService.getData(href)),
        map((data) => data["export-profiles"])
      )
      .subscribe((profiles) => {
        this.profiles = <any[]>profiles;
      });

    observableCombineLatest(
      this.assetTitle.asObservable().pipe(distinctUntilChanged()),
      this.reload.asObservable(),
      (assetNo, reloadEvent) => {
        this.selectedLocale = reloadEvent;
        return assetNo;
      }
    )
      .pipe(
        map((number) => headerTemplate.fill({ asset: number })),
        mergeMap((href) => this._widgetframeService.getData(href))
      )
      .subscribe(
        (data) => {
          this.header = data;
          this.asset = [data];
          if (this.header["file-size"]) {
            this.header["formatted-file-size"] = UtilService.byteToMBLocalized(
              this.header["file-size"],
              this.selectedLocale
            );
          }
        },
        (error) => {
          console.log(error);
        }
      );
  }
  //For width and height of video iframe
  setParam(uri, key, val) {
    return uri
      .replace(
        RegExp("([?&]" + key + "(?=[=&#]|$)[^#&]*|(?=#|$))"),
        "&" + key + "=" + encodeURIComponent(val)
      )
      .replace(/^([^?&]+)&/, "$1?");
  }

  ngOnInit() {}
}