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

import { filter, map, mergeMap, distinctUntilChanged } from "rxjs/operators";
import { Component } from "@angular/core";
import { WidgetframeService } from "../../widgetframe/widgetframe.service";
import { WidgetConfig } from "../../widget.configuration";
import {
  WidgetComponent,
  WidgetId,
  WidgetConfiguration,
  WidgetConfigure,
  WidgetInput,
  WidgetOutput,
} from "../../widget.metadata";
import * as uriTemplates_ from "uri-templates";
const uriTemplates = uriTemplates_;

declare var $: any;

/**
 * Used in iPIM Buy.
 * No Widgetframe.
 *
 * Button of type mat-raised-button
 */
@WidgetComponent("nm-product-details-head")
@Component({
  selector: "nm-product-details-head",
  templateUrl: "./head.component.html",
  styleUrls: ["./head.component.scss"],
})
export class HeaderWidgetComponent {
  public cols: any[];
  public header: any;
  public product: any;
  public manufacturerImage: any = "";
  public assetHref = new ReplaySubject<any>(1);

  @WidgetId()
  public _id;

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

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

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

  @WidgetConfiguration()
  public configuration: WidgetConfig;

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

  @WidgetConfigure()
  protected configureWidget(configuration: WidgetConfig) {
    let headerHref = configuration._links["showcase-header"]["href"];
    let headerTemplate = uriTemplates(headerHref);
    observableCombineLatest(
      this.productNo.asObservable().pipe(distinctUntilChanged()),
      this.reload.asObservable(),
      (productNo, reloadEvent) => productNo
    )
      .pipe(
        map((number) => headerTemplate.fill({ product: number })),
        mergeMap((href) => this._widgetframeService.getData(href))
      )
      .subscribe((data) => {
        this.header = data;
      });

    let productHref = configuration._links["product"]["href"];
    let productTemplate = uriTemplates(productHref);

    observableCombineLatest(
      this.productNo.asObservable().pipe(distinctUntilChanged()),
      this.reload.asObservable(),
      (productNo, reloadEvent) => productNo
    )
      .pipe(
        map((number) => productTemplate.fill({ product: number })),
        mergeMap((href) => this._widgetframeService.getData(href))
      )
      .subscribe((data) => (this.product = data));

    let manufacturerImageHref =
      configuration._links["manufacturerImage"]["href"];
    let manufacturerImageTemplate = uriTemplates(manufacturerImageHref);
    this.manufacturerImage = "";
    this.productNo
      .asObservable()
      .pipe(
        map((number) => manufacturerImageTemplate.fill({ product: number })),
        mergeMap((href) => this._widgetframeService.getData(href)),
        filter(
          (data) =>
            data &&
            data._embedded &&
            data._embedded["asset-relations"] &&
            data._embedded["asset-relations"]["0"] &&
            data._embedded["asset-relations"]["0"]._embedded.assets
        )
      )
      .subscribe(
        (data) => {
          this.manufacturerImage =
            data["_embedded"]["asset-relations"]["0"]._embedded.assets[
              "0"
            ]._links.default.href;
        },
        (error) => {
          console.log(error);
          var err = JSON.parse(error.text());
        }
      );

    if (configuration._links["assets"]) {
      let assetHref = configuration._links["assets"]["href"];
      let assetTemplate = uriTemplates(assetHref);
      this.productNo
        .asObservable()
        .subscribe((number) =>
          this.assetHref.next(assetTemplate.fill({ product: number }))
        );
    }
  }

  ngOnInit() {}
}