import {
  combineLatest as observableCombineLatest,
  Subject,
  Observable,
} from "rxjs";
import { getOrDefault } from "../../widget.configuration";
import { map, mergeMap, takeUntil, distinctUntilChanged } from "rxjs/operators";
import { Component, OnDestroy } from "@angular/core";
import { WidgetframeService } from "../../widgetframe/widgetframe.service";
import { WidgetConfig } from "../../widget.configuration";
import {
  WidgetComponent,
  WidgetId,
  WidgetConfiguration,
  WidgetConfigure,
  WidgetInput,
} from "../../widget.metadata";
import { NgUnsubscribe } from "../../../ng-unsubscribe";
import * as uriTemplates_ from "uri-templates";
import { CustomNotificationService } from "../../../components/notification/customnotification.service";
import { filter } from "rxjs/operators";
import { BaseConfiguration } from "../../widgetframe/widgetframe.component";

const uriTemplates = uriTemplates_;
export interface AttributeListConfiguration extends BaseConfiguration{
  /**
   * If set to true, the whole widget is hidden if the attributes list is empty.
   * @default(true)
   */
  hideOnEmpty: boolean;

  /**
   * If set to true, the attributes are displayed as two columns next to each other.
   * Otherwise, they're displayed as one column.
   * @default(false)
   */
  twoColumns: boolean;

  /**
   * Text to provide information about the widget and the business meaning of its usage.
   */
  infoText: string;

  /**
   * If set to true, the product number, client, locale and UI locale are added to the uri params when requesting the attributes data from the backend.
   * Otherwise, only the product number is taken into consideration.
   * @default(false)
   */
  combineWithClient: boolean;

  /**
   * If set to true, the whole attribute value should be displayed into nm-ellipsis component.
   * @default(false)
   */
  hasTextWidth: boolean;

  /**
   * Text to provide header for the widget.
   */
  header: string;

  /**
   * Text to provide title for the widget.
   */
  title: string;
}
/**
 * Used in iPIM Buy.
 * Surrounded by Widgetframe.
 *
 * List of attributes. Displays attribute description and value. Uses productNo or assetTitle to fill url template from json property.
 */
@WidgetComponent("nm-attribute-list")
@Component({
  selector: "nm-attribute-list",
  templateUrl: "./attributelist.component.html",
  styleUrls: ["./attributelist.component.scss"],
})
export class AttributeListWidgetComponent implements OnDestroy {
  public cols: any[];
  public attributes: any;
  public hideOnEmpty: boolean = true;
  public combineWithClient: boolean = false;
  public inputLink: string;

  @WidgetConfiguration()
  public configuration: WidgetConfig<AttributeListConfiguration>;

  // Input used to fill url template
  @WidgetInput()
  public productNo = new Subject<any>();

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

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

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

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

  // Input used to fill url template
  @WidgetInput()
  public assetTitle = new Subject<any>();

  // Forces a reload of the data url
  @WidgetInput()
  public reload = new Subject<any>();

  @WidgetId()
  public _id: string;

  public infoText: string;
  public wikiLink: string;
  public title: string;
  public twoColumns: string;
  private unsubscribe = NgUnsubscribe.create();

  constructor(
    private _widgetframeService: WidgetframeService,
    private notificationService: CustomNotificationService
  ) {
    this.cols = [
      { field: "description", header: "tab.head.att.name" },
      { field: "value", header: "" },
    ];
  }

  @WidgetConfigure()
  protected configureWidget(
    configuration: WidgetConfig<AttributeListConfiguration>
  ) {
    this.hideOnEmpty = getOrDefault(
      this.configuration.configuration.hideOnEmpty,
      true
    );

    this.twoColumns = getOrDefault(
      this.configuration.configuration.twoColumns,
      false
    );

    this.combineWithClient = getOrDefault(
      this.configuration.configuration.combineWithClient,
      false
    );

    this.infoText = this.configuration.configuration.infoText;

    let href = configuration._links["attributes"]["href"];
    let template = uriTemplates(href);

    if (configuration.configuration.combineWithClient) {
      observableCombineLatest(
        this.productNo.asObservable().pipe(filter((productNo) => !!productNo)),
        this.client.asObservable().pipe(distinctUntilChanged()),
        this.locale.asObservable().pipe(distinctUntilChanged()),
        this.uiLocale.asObservable().pipe(distinctUntilChanged()),
        this.reload.asObservable(),
        function (productNo, client, locale, uiLocale, reloadEvent) {
          let uriParams: any = {};
          uriParams.locale = locale ? locale : "";
          uriParams.productNo = productNo ? productNo : "";
          uriParams.client = client ? client : "";
          uriParams.uilocale = uiLocale ? uiLocale : "";

          if (productNo) {
            return template.fill(uriParams);
          }
        }
      )
        .pipe(
          mergeMap((href) => this._widgetframeService.getData(href)),
          takeUntil(this.unsubscribe)
        )
        .subscribe((data) => {
          if (data) {
            if (data.error !== undefined) {
              this.notificationService.fromResponse(data);
              this.attributes = [];
            } else {
              this.attributes = data.values;
            }
          }
        });
    } else {
      observableCombineLatest(
        this.productNo.asObservable().pipe(distinctUntilChanged()),
        this.reload.asObservable(),
        (productNo, reloadEvent) => productNo
      )
        .pipe(
          map((number) => template.fill({ product: number })),
          mergeMap((href) => this._widgetframeService.getData(href)),
          takeUntil(this.unsubscribe)
        )
        .subscribe((data) => (this.attributes = data["values"]));

      observableCombineLatest(
        this.assetTitle.asObservable().pipe(distinctUntilChanged()),
        this.reload.asObservable(),
        (assetTitle, reloadEvent) => assetTitle
      )
        .pipe(
          map((title) => template.fill({ asset: title })),
          mergeMap((href) => this._widgetframeService.getData(href)),
          takeUntil(this.unsubscribe)
        )
        .subscribe((data) => (this.attributes = data["values"]));
    }

    this.resetChannel
      .asObservable()
      .pipe(takeUntil(this.unsubscribe))
      .subscribe((reset) => {
        this.attributes = [];
      });
  }

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