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

import {
  onErrorResumeNext,
  filter,
  map,
  distinctUntilChanged,
  mergeMap,
  takeUntil,
} 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,
} from "../../../widget.metadata";
import * as uriTemplates_ from "uri-templates";
const uriTemplates = uriTemplates_;
import { NgUnsubscribe } from "../../../../ng-unsubscribe";

declare var $: any;

@WidgetComponent("nm-product-info")
@Component({
  selector: "nm-product-info",
  templateUrl: "./product-info.component.html",
  styleUrls: ["./product-info.component.scss"],
})
export class ProductInfoWidgetComponent {
  public cols: any[];
  public header: any;
  public product: any;
  public manufacturerImage: any = "";
  public assetHref = new ReplaySubject<any>(1);
  public title: string;
  public productNo: string;
  private unsubscribe = NgUnsubscribe.create();

  @WidgetId()
  public _id;

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

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

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

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

  @WidgetConfiguration()
  public configuration: WidgetConfig;

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

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

  @WidgetConfigure()
  protected configureWidget(configuration: WidgetConfig) {
    this.title = this.configuration.configuration["title"];
    this.resetWidgets.subscribe((data) => {
      this.header = null;
    });

    let headerHref = configuration._links["product-info-header"]["href"];

    // let headerHref = "/api/core/products/{product}/content?type=overview&data-locale=de_DE&locale=de-DE&attributes:filter=identifier%3Ain%3A%22WebshopText%2CBasicText%2CBrand%2CSubBrand%2CSalesCategoryLower%2CSalesCategoryUpper%22"

    let headerTemplate = uriTemplates(headerHref);

    observableCombineLatest(
      this.productNoForProduct.asObservable(),
      this.reload.asObservable(),
      (productNoForProduct, reloadEvent) => productNoForProduct
    )
      .pipe(
        filter((productNoForProduct) => !!productNoForProduct),
        map((number) => headerTemplate.fill({ product: number })),
        mergeMap((href) =>
          this._widgetframeService
            .getData(href)
            .pipe(onErrorResumeNext(this.resetWidget()))
        ),
        takeUntil(this.unsubscribe),
        map((data) => <any>data)
      )
      .subscribe(
        (data) => {
          this.header = {};
          this.header = data;

          if (
            data["attributes"] &&
            data["attributes"].hasOwnProperty("default")
          ) {
            for (let attribute of data["attributes"]["default"]) {
              if (attribute.identifier === "Brand") {
                this.header["Brand"] = attribute.value;
              }
              if (attribute.identifier === "SubBrand") {
                this.header["SubBrand"] = attribute.value;
              }
              if (attribute.identifier === "SalesCategoryLower") {
                this.header["SalesCategoryLower"] = attribute.value;
              }

              if (attribute.identifier === "SalesCategoryUpper") {
                this.header["SalesCategoryUpper"] = attribute.value;
              }

              if (attribute.identifier === "WebshopText") {
                this.header["WebshopText"] = attribute.value;
              }
            }
          }

          // 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(
        filter((productNoForProduct) => !!productNoForProduct),
        map((number) => productTemplate.fill({ product: number })),
        mergeMap((href) => this._widgetframeService.getData(href)),
        takeUntil(this.unsubscribe)
      )
      .subscribe(
        (data) => (this.product = data),
        (error) => {
          console.log(error);
          var err = JSON.parse(error.text());
        }
      );

    this.productNoForProduct
      .asObservable()
      .pipe(takeUntil(this.unsubscribe))
      .subscribe((number) => {
        this.productNo = number;
        let assetHref = 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;
  }

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