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

import {
  map,
  mergeMap,
  distinctUntilChanged,
  onErrorResumeNext,
} from "rxjs/operators";
import {
  ChangeDetectionStrategy,
  ChangeDetectorRef,
  Component,
  ViewChild,
} from "@angular/core";

import { WidgetframeService } from "../../../widgetframe/widgetframe.service";
import { WidgetConfig } from "../../../widget.configuration";
import {
  WidgetComponent,
  WidgetConfiguration,
  WidgetConfigure,
  WidgetId,
  WidgetInput,
  WidgetOutput,
} from "../../../widget.metadata";
import * as uriTemplates_ from "uri-templates";

const uriTemplates = uriTemplates_;

@WidgetComponent("nm-item-list-seletion")
@Component({
  selector: "nm-item-list-seletion",
  templateUrl: "./item-list.component.html",
  styleUrls: ["./item-list.component.scss"],
  changeDetection: ChangeDetectionStrategy.OnPush,
  host: {
    "(window:keydown)": "keydown($event)",
    "(window:keyup)": "keyup($event)",
  },
})
export class ItemListSelectionWidgetComponent {
  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 priorSelectedRows: any[] = [];
  public selectedProductLevelValue: string;
  public shiftIsPressed: boolean = false;
  public lastSelectedRowIndex: number = 0;

  public inputLink: string;

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

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

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

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

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

  @WidgetConfiguration()
  public configuration: WidgetConfig;

  @WidgetId()
  public _id;

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

  @ViewChild("dt") datatable: any;

  constructor(
    private _widgetframeService: WidgetframeService,
    private _changeDetectorRef: ChangeDetectorRef
  ) {}

  onRowSelectChange($event) {
    if ($event != undefined) {
      this.priorSelectedRows = this.selectedRows;
      this.selectedItems.next(this.selectedRows);
      this.selectMasterLevelItems(this.selectedProductLevelValue);
      this._changeDetectorRef.markForCheck();
    }
  }

  onRowClick($event) {
    if (navigator.userAgent.indexOf("Firefox") !== -1) {
      if (this.shiftIsPressed) {
        this.selectRowsBetweenIndexes([
          this.lastSelectedRowIndex,
          this.datatable["dataToRender"].indexOf($event.data),
        ]);
      }
      this.lastSelectedRowIndex = this.datatable["dataToRender"].indexOf(
        $event.data
      );
    }
  }

  keydown(event: any) {
    if (event.shiftKey && event.keyCode === 38) {
      this.keynavigation(-1, this.selectedRows[0]);
    }
    if (event.shiftKey && event.keyCode === 40) {
      this.keynavigation(+1, this.selectedRows[this.selectedRows.length - 1]);
    }

    if (event.keyCode === 16) {
      this.shiftIsPressed = true;
    }
    this._changeDetectorRef.markForCheck();
  }

  keyup(event: any) {
    if (event.keyCode === 16) {
      this.shiftIsPressed = false;
    }
  }

  selectRowsBetweenIndexes(indexes) {
    indexes.sort(function (a, b) {
      return a - b;
    });

    for (var i = indexes[0]; i <= indexes[1]; i++) {
      this.selectedRows.push(this.datatable["dataToRender"][i]);
    }

    this.selectedRows = this.selectedRows.filter((obj, pos, arr) => {
      return (
        arr.map((mapObj) => mapObj["itemNo"]).indexOf(obj["itemNo"]) === pos
      );
    });

    this.datatable["_selection"] = this.selectedRows;
    this.selectedItems.next(this.selectedRows);
  }

  keynavigation(direction, currentSelection) {
    let currentrow = this.datatable["dataToRender"].filter(
      (item) => item.itemNo == currentSelection.itemNo
    );
    let index = this.datatable["dataToRender"].indexOf(currentrow[0]);
    if (this.datatable["dataToRender"][index + direction] != undefined) {
      this.selectedRows = [];
      this.selectedRows.push(this.datatable["dataToRender"][index + direction]);
      this.selectedItems.next(this.selectedRows);
    }
  }

  @WidgetConfigure()
  protected configureWidget(configuration: WidgetConfig) {
    let href = configuration._links["items"]["href"];
    let template;

    this.selectedProductLevel
      .pipe(distinctUntilChanged())
      .subscribe((selectedProductLevel) => {
        this.selectedProductLevelValue = selectedProductLevel;
        this.selectMasterLevelItems(this.selectedProductLevelValue);
        this.priorSelectedRows = [];
        if (this.datatable !== undefined) {
          if (
            selectedProductLevel === "item" ||
            selectedProductLevel === "product"
          ) {
            var that = this;
            setTimeout(function () {
              if (!(that.datatable["dataToRender"] == undefined)) {
                that.selectedRows = [];
                that.selectedRows.push(that.datatable["dataToRender"][0]);
                that.selectedItems.next(that.selectedRows);
                that._changeDetectorRef.markForCheck();
              }
            }, 1);
          }
        }
      });

    this.resetWidgets.subscribe((data) => {
      this.items = null;
      //this.selectedItems.next(null);
      this.uri.next(" ");
    });

    observableCombineLatest(
      this.uri.asObservable().pipe(distinctUntilChanged()),
      this.reload.asObservable(),
      (uri, reloadEvent) => uri
    )
      .pipe(
        map((uri) => uriTemplates(uri).fill({})),
        mergeMap((href) =>
          this._widgetframeService
            .getData(href)
            .pipe(onErrorResumeNext(this.resetWidget()))
        ),
        map((res) => <any>res)
      )
      .subscribe((data) => {
        if (data["_embedded"]["items"].length == 0) {
          return;
        }
        let dimsCols: any[] = new Array();
        this.cols = [].concat(configuration.configuration["columns"]);
        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"]["items"][0].attributes[
            "dimensions"
          ]) {
            let dim = {
              field: "",
              header: "",
              sortable: false,
              filter: false,
            };
            let attr =
              data["_embedded"]["items"][0].attributes.dimensions[attribute];
            if (attr.value != "") {
              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: any = data["_embedded"]["items"];
        for (var item in tempitems) {
          if (tempitems[item].attributes) {
            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.selectFirstRow();

        if (this.priorSelectedRows.length > 0) {
          setTimeout(() => {
            this.selectedRows = [];

            for (let item of this.items) {
              let selected = this.priorSelectedRows.filter(
                (priorSelected) => item.itemNo === priorSelected.itemNo
              );

              if (selected.length > 0) {
                this.selectedRows.push(item);
              }
            }
            if (this.selectedRows.length > 0) {
              this.selectedItems.next(this.selectedRows);
              this._changeDetectorRef.markForCheck();
            }
          }, 100);
        }

        if (this.selectedRows.length === 0) {
          this.selectFirstRow();
        }

        this.selectMasterLevelItems(this.selectedProductLevelValue);
        this._changeDetectorRef.markForCheck();
      });
  }

  selectFirstRow() {
    this.selectedRows = [];
    this.selectedRows.push(this.items[0]);
    this.selectedItems.next(this.selectedRows);
  }

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

  selectMasterLevelItems(selectedProductLevel) {
    this._changeDetectorRef.markForCheck();
    if (selectedProductLevel === "master") {
      if (this.selectedRows["0"] != undefined) {
        let selectedVariantenRef = this.selectedRows["0"]["VariantenRef"];
        this.selectedRows = [];
        for (var item of this.items) {
          if (item["VariantenRef"] === selectedVariantenRef) {
            this.selectedRows.push(item);
          }
        }
        this.selectedItems.next(this.selectedRows);
      }
    }
  }
}