import {
  empty as observableEmpty,
  of as observableOf,
  combineLatest as observableCombineLatest,
  Subject,
  ReplaySubject,
  BehaviorSubject,
  Observable,
} from "rxjs";

import {
  distinctUntilChanged,
  mergeMap,
  map,
  switchMap,
  catchError,
} 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;

@WidgetComponent("nm-product-info-view")
@Component({
  selector: "nm-product-info-view",
  templateUrl: "./product-info-view.component.html",
  styleUrls: ["./product-info-view.component.scss"],
})
export class ProductInfoViewWidgetComponent {
  public cols: any[];
  public header: any;
  public product: any;
  //    public manufacturerImage: any = "";
  public assetHref = new ReplaySubject<any>(1);
  public title: string;
  public linkDE: string = "http://www.c-and-a.com/de/de/shop/product/";
  public linkEU: string = "http://www.c-and-a.com/eu/en/shop/product/";

  @WidgetId()
  public _id;

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

  @WidgetOutput()
  public resetWidgets = new ReplaySubject<any>();

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

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

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

  @WidgetConfiguration()
  public configuration: WidgetConfig;

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

  @WidgetConfigure()
  protected configureWidget(configuration: WidgetConfig) {
    this.title = this.configuration.configuration["title"];
    this.linkEU = this.configuration.configuration["shop-link-eu"];
    this.linkDE = this.configuration.configuration["shop-link-de"];
    //    this.productNoForProduct.subscribe(data => { console.log("PRODUCT NO IN product info", data) });
    //    this.resetWidgets.subscribe(data => { console.log("reset in info", data) });

    let headerHref = configuration._links["showcase-header"]["href"];
    let headerTemplate = uriTemplates(headerHref);

    observableCombineLatest(
      this.productNoForProduct.asObservable().pipe(distinctUntilChanged()),
      this.selectedUiLocale.asObservable(),
      this.reload.asObservable(),
      (productNoForProduct, selectedUiLocale) => {
        this.linkEU =
          this.configuration.configuration["shop-link-eu"] +
          productNoForProduct;
        this.linkDE =
          this.configuration.configuration["shop-link-de"] +
          productNoForProduct;
        let uriParams = {};
        uriParams["product"] = productNoForProduct;
        uriParams["data-locale"] = selectedUiLocale;
        uriParams["context"] = configuration.configuration["context"];
        uriParams["locale"] = selectedUiLocale;
        return uriParams;
      }
    )
      .pipe(
        map((uriParams) => headerTemplate.fill(uriParams)),
        switchMap((uri) => {
          return observableOf(uri).pipe(
            mergeMap((uri) => {
              return this._widgetframeService.getData(uri);
            }),
            catchError((err) => {
              this.header = null;
              return observableEmpty();
            })
          );
        })
      )
      .subscribe(
        (data) => {
          this.header = [];
          this.header = data;
          // JQuery helper to position nm-categorypath at the bottom without knowing the height.
          window.setTimeout(() =>
            $(".nm-featurelist").css(
              "padding-bottom",
              $(".nm-categorypath").height()
            )
          );
        },
        (error) => {
          console.log(error);
          this.header = null;
        }
      );

    let productHref = configuration._links["product"]["href"];
    let productTemplate = uriTemplates(productHref);
    observableCombineLatest(
      this.productNoForProduct.asObservable().pipe(distinctUntilChanged()),
      this.reload.asObservable(),
      (productNoForProduct, reloadEvent) => productNoForProduct
    )
      .pipe(
        map((number) => productTemplate.fill({ product: number })),
        mergeMap((href) => this._widgetframeService.getData(href))
      )
      .subscribe(
        (data) => (this.product = data),
        (error) => {
          console.log(error);
          var err = JSON.parse(error.text());
        }
      );

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

  resetWidget() {
    this.header = null;
    this.resetWidgets.next(new Date());
    return null;
  }

  ngOnInit() {}
}