import {
  empty as observableEmpty,
  combineLatest as observableCombineLatest,
  Subject,
  Observable,
  combineLatest,
} from "rxjs";
import { NgUnsubscribe } from "../../ng-unsubscribe";
import {
  catchError,
  debounceTime,
  distinctUntilChanged,
  map,
  mergeMap,
  takeUntil,
} from "rxjs/operators";
import { Component, OnInit } 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 { CurrentLocaleService } from "../../components/i18n/currentLocale.service";
import * as uriTemplates_ from "uri-templates";

const uriTemplates = uriTemplates_;

@WidgetComponent("nm-item-list")
@Component({
  selector: "nm-item-list",
  templateUrl: "./itemlist.component.html",
  styleUrls: ["./itemlist.component.scss"],
  providers: [WidgetframeService],
})
export class ItemWidgetComponent implements OnInit {
  public cols: any[];
  public items: any;
  public dimsGroupSpanHeader: any;
  public headerColumnGroup: boolean;
  public dimsGroupColIndex: number;
  public dimsColsNo: number;
  public arr = Array;
  public selectedRows: any[] = [];

  public selectedUiLocaleString = "de-DE";

  public inputLink: string;
  public genericItemList: false;
  public cssClass: string;
  public title: string = "nm-item-list";
  public dataType: string = "items";
  public preselectRow = true;
  public disableHeaderTooltip: boolean = true;

  private unsubscribe = NgUnsubscribe.create();

  // The productNo to search for
  @WidgetInput()
  public productNo = new Subject<any>();

  // Reloads the items every time this emits. Needs to emit at least on to trigger a search
  @WidgetInput()
  public uri = new Subject<any>();

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

  @WidgetConfiguration()
  public configuration: WidgetConfig;

  @WidgetId()
  public _id;

  @WidgetOutput("selectedItems")
  private selectedItems: Subject<any> = new Subject<any>();

  @WidgetOutput("selectedItem")
  private selectedItem: Subject<any> = new Subject<any>();

  constructor(
    private _widgetframeService: WidgetframeService,
    private currentLocaleService: CurrentLocaleService
  ) {}

  onRowSelectChange($event) {
    this.selectedItems.next(this.selectedRows);
  }

  @WidgetConfigure()
  protected configureWidget(configuration: WidgetConfig) {
    let template;
    this.dataType = configuration.configuration["dataType"] || this.dataType;

    if (configuration._links) {
      let href = configuration._links[this.dataType]["href"];

      template = uriTemplates(href);
    }
    this.cssClass = configuration.configuration["cssClass"] || "";
    this.title = configuration.configuration["title"] || this.title;

    this.preselectRow =
      configuration.configuration["preselectRow"] != undefined
        ? configuration.configuration["preselectRow"]
        : true;

    if (configuration.configuration["genericItemList"]) {
      this.genericItemList = configuration.configuration["genericItemList"];
    }

    combineLatest([
      this.productNo.asObservable().pipe(distinctUntilChanged()),
      this.reload.asObservable(),
    ])
      .pipe(
        map(([productNo, reloadEvent]) => {
          return { productNo: productNo, reloadEvent: reloadEvent };
        }),
        debounceTime(50),
        map((data) => {
          return template.fill({
            product: data.productNo,
            locale: data.reloadEvent,
            "data-locale": data.reloadEvent,
          });
        }),
        mergeMap((href) =>
          this._widgetframeService
            .getData(href)
            .pipe(catchError(() => observableEmpty()))
        )
      )
      .subscribe(
        (data) => {
          this.populateTable(data, configuration);
        },
        (error) => {
          console.log(error);
          // var err = JSON.parse(error.text());
        }
      );

    observableCombineLatest(
      this.uri.asObservable().pipe(distinctUntilChanged()),
      this.reload.asObservable(),
      (productNo, reloadEvent) => productNo
    )
      .pipe(
        mergeMap((href) =>
          this._widgetframeService
            .getData(href)
            .pipe(catchError(() => observableEmpty()))
        )
      )
      .subscribe(
        (data) => {
          this.populateTable(data, configuration);
        },
        (error) => {
          console.log(error);
          // var err = JSON.parse(error.text());
        }
      );

    this.currentLocaleService
      .getCurrentLocale()
      .pipe(takeUntil(this.unsubscribe))
      .subscribe((locale) => {
        this.selectedUiLocaleString = locale;
      });
  }

  populateTable(data, configuration) {
    if (data["_embedded"][this.dataType].length > 0) {
      let dimsCols: any[] = new Array();
      this.cols = configuration.configuration["columns"];
      for (let col of this.cols) {
        if (!col.sortable && !col.filter) {
          if (col.style) {
            col.style += " noFilter";
          } else {
            col.style = "noFilter";
          }
        } else if (col.sortable && !col.filter) {
          if (col.style) {
            col.style += " sortOnly";
          } else {
            col.style = "sortOnly";
          }
        }
      }

      this.dimsGroupColIndex = this.cols.findIndex(
        (col) => col.group === "dimensions"
      );
      if (this.dimsGroupColIndex > -1) {
        let dimsGroupCol = this.cols[this.dimsGroupColIndex];
        this.dimsGroupSpanHeader = dimsGroupCol["header-span"];
        this.headerColumnGroup = true;
        if (this.dimsGroupColIndex === 1) {
          this.dimsGroupSpanHeader = "dimension";
        }
        for (var attribute in data["_embedded"][this.dataType][0].attributes[
          "dimensions"
        ]) {
          let dim = {
            field: "",
            header: "",
            sortable: false,
            filter: false,
          };
          let attr =
            data["_embedded"][this.dataType][0].attributes.dimensions[
              attribute
            ];
          dim["field"] = attr.identifier;
          dim["header"] = attr[dimsGroupCol["header-field"]];
          dim["sortable"] = dimsGroupCol.sortable;
          dim["filter"] = dimsGroupCol.filter;
          dimsCols.push(dim);
        }
        Array.prototype.splice.apply(
          this.cols,
          [this.dimsGroupColIndex, 1].concat(dimsCols)
        );
      } else {
        this.headerColumnGroup = false;
      }
      this.dimsColsNo = dimsCols.length;

      let tempitems = data["_embedded"][this.dataType];

      if (!this.genericItemList) {
        for (var item in tempitems) {
          for (var attribute in tempitems[item].attributes["default"]) {
            let attr = tempitems[item].attributes.default[attribute];
            tempitems[item][attr.identifier] = attr.value;
          }
          for (var attribute in tempitems[item].attributes["dimensions"]) {
            let attr = tempitems[item].attributes.dimensions[attribute];
            tempitems[item][attr.identifier] = attr.value;
          }
        }
      }
      this.items = tempitems;
      this.selectedRows = [];
      if (this.preselectRow) {
        this.selectedRows.push(this.items[0]);
      }
      this.selectedItems.next(this.selectedRows);
    }
  }

  sendIdentifier(identifier) {
    this.selectedItem.next(identifier);
  }

  resetWidget() {
    this.items = null;
    // this.selectedItems.next(null);
    return null;
  }

  onFilterHeaderFocus(event) {
    if (
      event.querySelector("label").offsetWidth <
      event.querySelector("label").scrollWidth
    ) {
      this.disableHeaderTooltip = false;
    } else {
      this.disableHeaderTooltip = true;
    }
  }

  onHeaderFocus(event) {
    if (event.offsetWidth < event.scrollWidth) {
      this.disableHeaderTooltip = false;
    } else {
      this.disableHeaderTooltip = true;
    }
  }

  ngOnInit() {
    this.reload.next();
  }

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