import {
  switchMap,
  filter,
  map,
  debounceTime,
  takeUntil,
} from "rxjs/operators";
import {
  Component,
  Input,
  NgZone,
  OnDestroy,
  OnInit,
  ViewChild,
} from "@angular/core";
import { Subject, BehaviorSubject } from "rxjs";
import { ActivatedRoute, Router } from "@angular/router";
import { ListService } from "../../../list/list.service";

import { ScrollService } from "../../../../components/scroll/scroll.service";
import { ProgressbarService } from "../../../../components/progressbar/progressbar.service";
import { getOrDefault, WidgetConfig } from "../../../widget.configuration";
import { ShopCategoryService } from "../../../apps/my-shop-md/shop-category/shop-category.service";

import {
  WidgetComponent,
  WidgetConfiguration,
  WidgetConfigure,
  WidgetId,
  WidgetInput,
  WidgetOutput,
} from "../../../widget.metadata";

import { Result, ResultResource } from "../../../interfaces/list.interfaces";
import { NgUnsubscribe } from "../../../../ng-unsubscribe";

import * as uriTemplates_ from "uri-templates";
import { DragAndDropService } from "../../../../components/util/drag-and-drop.service";
import {
  LocalStorageEntry,
  LocalStorageService,
} from "../../../../components/local-storage/local-storage.service";
import {
  DeletionMode,
  Scope,
} from "../../../../components/local-storage/local-storage-constants";

const uriTemplates = uriTemplates_;

declare var $;

declare var jQuery: any;

interface UriParams {
  timestamp?: number;
  template?: any;
  offset?: number;
  limit?: number;
  sort?: string;
  filter?: string[];

  [key: string]: any;
}

@WidgetComponent("nm-color-list")
@Component({
  selector: '"nm-color-list',
  templateUrl: "./color-list.component.html",
  styleUrls: ["./color-list.component.scss"],

  //host: { '(window:keydown)': 'keydown($event)', '(window:keyup)': 'keyup($event)' },
})
export class ColorListWidgetComponent implements OnInit, OnDestroy {
  @ViewChild("dt", { static: true }) datatable: any;

  public selectedViewmode: string = "table";
  public results: BehaviorSubject<Result[]> = new BehaviorSubject([]);
  public multiselectaction: Subject<any> = new BehaviorSubject({});
  public multiselectpayload: Subject<any> = new BehaviorSubject({});
  public isMultiselectActionNeeded: boolean = false;
  public total: BehaviorSubject<number> = new BehaviorSubject(0);
  public cols: Subject<any[]> = new BehaviorSubject([]);
  public staticCols;
  public lookups: any;
  public showReload: boolean;

  public infoPlacement: string;

  private slidevalue: number = 3;
  private boxWidth: string = "33%";
  private boxHeight: string = "220px";
  public contentVisible: boolean = true;
  public totalresults: Result[] = [];
  public selectedRows: Result[] = [];
  public selectedRowsOnShift: Result[] = [];
  public shiftIsPressed: boolean;
  public firstLoad: boolean = true;
  public template: any;
  public profile: string;
  public actionsToAdd: string;
  public identifier: string = "";
  public isRestoreState: boolean = true;

  public rowStyleClassFunction = null;

  @Input("info-text")
  public infoText: string = "list.results";
  public wikiLink: string;
  public title: string;

  @Input("inputLink") inputLink: string;

  @Input("dataType") dataType: string = "products";

  /**
   * Input for a function that will be used to compute the style class of a row
   */
  @WidgetInput("rowStyleClassFunction")
  public rowStyleClassFunctionInput = new Subject<any>();

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

  @WidgetConfiguration()
  public configuration: WidgetConfig;

  private _uriParams: UriParams;

  @Input("uriParams")
  public set uriParams(params: any) {
    this._uriParams = <UriParams>params;
  }

  public get uriParams(): any {
    return this._uriParams;
  }

  @WidgetId()
  public _id;

  //The uri to fetch data from
  @WidgetInput("uri")
  private inputChannel: Subject<any> = new Subject<any>();

  @WidgetInput("modeischanged")
  private modeIsChangedChannel: Subject<any> = new Subject<any>();

  // Force a reload of the table on input
  @WidgetInput("reload")
  private reloadChannel: Subject<any> = new Subject<any>();

  // Resets all selected rows
  @WidgetInput("clearSelection")
  private clearSelectionChannel: Subject<any> = new Subject<any>();

  // Set the profile the table is using
  @WidgetInput("profile")
  private profileChannel: Subject<any> = new Subject<any>();

  // Emits all selected items whenever they change
  @WidgetOutput("selectedItems")
  private selectedItems: Subject<any> = new Subject<any>();

  /**
   * Emits each time a row is double clicked. Payload is the row
   */
  @WidgetOutput("rowDoubleClicked")
  public rowDoubleClicked = new Subject<any>();

  // Reset the sort, filter and paginator// Emits all selected items whenever they change
  @WidgetInput("reset")
  private resetChannel: Subject<any> = new Subject<any>();

  private currentLink: string;

  private onChange: Subject<any> = new Subject<any>();

  private offset: number;
  public limit: number = 10;
  private sort: string;
  private filter: string[];
  private style: string;
  public selectionMode = "single";
  public selectOnDoubleClick = false;
  public dragFrom = false;
  private lastUriEntry: LocalStorageEntry;
  private sendDragSourceWidget = false;

  private allowNoSelectionDrag = false;

  private isLoading = false;

  private unsubscribe = NgUnsubscribe.create();

  constructor(
    private listService: ListService,
    private router: Router,
    private localStorageService: LocalStorageService,
    private route: ActivatedRoute,
    private _scrollService: ScrollService,
    private _progressbarService: ProgressbarService,
    private _shopCategoryService: ShopCategoryService,
    private zone: NgZone,
    private dragAndDrop: DragAndDropService
  ) {
    this.selectedViewmode = "table";
  }

  @WidgetConfigure()
  protected configureWidget(configuration: WidgetConfig) {
    this.profile = configuration.configuration["default-profile"];
    this.staticCols = configuration.configuration["profiles"][this.profile];
    this.showReload = getOrDefault(
      configuration.configuration["showReload"],
      true
    );
    this.cols.next(
      configuration.configuration["profiles"][
        configuration.configuration["default-profile"]
      ]
    );
    this.dataType = configuration.configuration["dataType"];
    this.infoText = configuration.configuration["infoText"];
    this.title = configuration.configuration["title"];
    this.lastUriEntry = this.localStorageService.getLocalStorageEntry(
      "nm-lasturi-" + this.title,
      Scope.GLOBAL,
      DeletionMode.LOGIN
    );
    this.wikiLink = configuration.configuration["wikiLink"];
    this.actionsToAdd = configuration.configuration["actions"];
    this.identifier = configuration.configuration["identifier"];
    this.selectionMode =
      configuration.configuration["selectionMode"] !== undefined
        ? configuration.configuration["selectionMode"]
        : "multiple";
    this.selectOnDoubleClick =
      configuration.configuration["selectOnDoubleClick"] !== undefined
        ? configuration.configuration["selectOnDoubleClick"]
        : false;
    this.dragFrom =
      configuration.configuration["dragFrom"] !== undefined
        ? configuration.configuration["dragFrom"]
        : true;
    this.allowNoSelectionDrag = getOrDefault(
      configuration.configuration["allowNoSelectionDrag"],
      false
    );
    this.isRestoreState =
      configuration.configuration["restoreState"] !== undefined
        ? configuration.configuration["restoreState"]
        : true;
    this.sendDragSourceWidget = getOrDefault(
      configuration.configuration["sendDragSourceWidget"],
      false
    );
    this.infoPlacement = getOrDefault(
      configuration.configuration["infoPlacement"],
      "left"
    );
    this.results
      .asObservable()
      .pipe(takeUntil(this.unsubscribe))
      .subscribe((data) => (this.totalresults = data));
    this.profileChannel
      .asObservable()
      .pipe(takeUntil(this.unsubscribe))
      .subscribe((profile) => {
        this.profile = profile;

        this.cols.next(configuration.configuration["profiles"][profile]);
      });

    this.rowStyleClassFunctionInput
      .asObservable()
      .pipe(takeUntil(this.unsubscribe))
      .subscribe((fn) => (this.rowStyleClassFunction = fn));

    this.clearSelectionChannel
      .asObservable()
      .pipe(takeUntil(this.unsubscribe))
      .subscribe((reload) => {
        this.selectedRows = [];
        this.isMultiselectActionNeeded = false;
      });

    this.reloadChannel
      .asObservable()
      .pipe(takeUntil(this.unsubscribe))
      .subscribe((reload) => {
        this.reload(true);
      });

    this.modeIsChangedChannel
      .asObservable()
      .pipe(takeUntil(this.unsubscribe))
      .subscribe((isChanged) => {
        if (this.datatable) {
          this.datatable.reset();
        }

        this.reload();
      });

    this.resetChannel
      .asObservable()
      .pipe(takeUntil(this.unsubscribe))
      .subscribe((reset) => {
        if (this.datatable) {
          this.datatable.reset();
          this.total.next(null);
          this.results.next([]);
          this.lastUriEntry.clear();
          this.onChange.next("reset");
        }
      });

    this.inputChannel
      .asObservable()
      .pipe(takeUntil(this.unsubscribe))
      .subscribe((link) => {
        this.clearSelectionChannel.next();
        if (link === null) {
          this.total.next(null);
          this.results.next([]);
        } else {
          this.currentLink = link;
          this.offset = 0;
          this.totalresults = [];

          if (this.datatable) {
            this.datatable.reset();
          }

          this.reload();
        }
      });

    this.onChange
      .pipe(
        takeUntil(this.unsubscribe),
        debounceTime(500),
        map((trigger) => {
          let input = this.currentLink;
          let offset = this.offset || 0;
          let limit = this.limit || 10;
          let sort = this.sort || "";
          let filter = this.filter || [];

          if (!input) {
            return null;
          }

          let uriParams = Object.assign(
            {},
            { offset: offset },
            { limit: limit },
            { sort: sort },
            { filter: filter }
          );

          if (trigger === "reset") {
            return {};
          }

          if (trigger !== undefined) {
            uriParams.cache = (<Date>trigger).getTime();
            input += "{&cache}";
          }

          uriParams.template = input;
          return uriParams;
        }),
        filter((uriParams) => !!uriParams),
        map((uriParams) => {
          if (Object.keys(uriParams).length == 0) {
            return "";
          }
          this.template = uriTemplates((<any>uriParams).template);

          return this.template.fill(uriParams);
        }),
        switchMap((uri) => {
          if (uri === "") {
            return new Subject();
          }
          this.lastUriEntry.value = uri;
          if (this.isLoading) {
            // If we are currently loading cancel one request, since we cant listen to rxjs cancel events
            this._progressbarService.requestFinished();
          }
          this.isLoading = true;
          return this.listService.getTemplatedFilteredResults(uri);
        }),
        takeUntil(this.unsubscribe)
      )

      .subscribe((data) => {
        this.isLoading = false;
        this.mapResult(data);
        this.firstLoad = false;
      });

    if (this.isRestoreState) {
      let lastUri = this.lastUriEntry.value;
      this.inputChannel.next(lastUri);
    }
  }

  ngOnInit() {}

  ngOnDestroy(): void {
    this.unsubscribe.destroy();
    this._progressbarService.requestFinished();
  }

  public reload(force: boolean = false) {
    if (force) {
      this.onChange.next(new Date());
    } else {
      this.onChange.next();
    }
  }

  private mapResult(data: ResultResource) {
    this.lookups = data["lookups"];
    this.multiselectaction.next(data._actions);

    if (data._embedded[this.dataType].length > 0) {
      if (this.actionsToAdd) {
        for (var item of data._embedded[this.dataType]) {
          item._actions = {};

          if (this.actionsToAdd["add-to-favorites"]) {
            item._actions["add-to-favorites"] = {
              type: "event",
              payload: { identifier: item.identifier },
            };
          }
          if (this.actionsToAdd["remove-from-favorites"]) {
            item._actions["remove-from-favorites"] = {
              type: "event",
              payload: { identifier: item.identifier },
            };
          }
          if (this.actionsToAdd["add-relations"]) {
            item._actions["add-relations"] = {
              type: "event",
              payload: { identifier: item.identifier },
            };
          }
        }
      }
      for (var result of data._embedded[this.dataType]) {
        for (var attribute of result.attributes.default) {
          result[attribute.identifier] = attribute.value;
        }
      }
      this.results.next(data._embedded[this.dataType]);
    } else {
      this.results.next([]);
    }

    this.total.next(data.total);
    // TODO: This leads to lost parameters
    // this.currentLink = data._links["custom"].href;
    if (this.dragFrom) {
      this.refreshDragAndDrop();
    }
  }

  refreshDragAndDrop() {
    let self = this;
    this.zone.runOutsideAngular(() => {
      setTimeout(() => {
        jQuery("#" + self._id + " .nm-color-list tr").draggable({
          cursor: "grabbing",
          connectToSortable: ".nm-color-list-sort tbody",
          scroll: true,
          appendTo: "body",
          revert: "invalid",
          helper: function () {
            var selected = $(
              "#" + self.identifier + " .nm-color-list tr.ui-state-highlight"
            );
            if (selected.length === 0 || selected.index($(this)) === -1) {
              selected = $(this);
            }
            var container = $("<tr/>").attr("id", "draggingContainer");
            container.append(selected.clone());
            return container;
          },
          start: function (event, ui) {
            return self.beginDragging();
          },
          stop: function (event, ui) {
            self.dragAndDrop.completeDrag();
          },
        });
      }, 1);
    });
  }

  isEmpty(obj) {
    for (var key in obj) {
      if (obj.hasOwnProperty(key)) return false;
    }
    return true;
  }

  beginDragging(): boolean {
    let hoveredRow;
    if (this.allowNoSelectionDrag) {
      const rows = $("tr:hover");
      const index = this.offset + rows.parent().children().index(rows);
      hoveredRow = this.totalresults[index];
    }
    if (this.selectedRows.length === 0) {
      if (!this.allowNoSelectionDrag) {
        return false;
      }
      this.registerDrag([hoveredRow]);
      return true;
    } else {
      //The selected rows are in the order they were selected, which is wrogn! We need them in the order that they are in the result list!
      const results = this.results.getValue();
      let sorted = Array.isArray(this.selectedRows)
        ? this.selectedRows
        : [].concat(this.selectedRows);
      if (hoveredRow && sorted.indexOf(hoveredRow) === -1) {
        this.registerDrag([hoveredRow]);
        return;
      }
      if (Array.isArray(sorted)) {
        sorted = sorted
          .map((data) => {
            return { index: results.indexOf(data), data };
          })
          .sort((a, b) => a.index - b.index)
          .map((data) => data.data);
      }

      this.registerDrag(sorted);
      return true;
    }
  }

  private registerDrag(data) {
    if (this.sendDragSourceWidget) {
      this.dragAndDrop.registerDragWithWidget(
        "color-list",
        this._id,
        [].concat(data)
      );
    } else {
      this.dragAndDrop.registerDrag("color-list", [].concat(data));
    }
  }

  onPage(event) {
    this.limit = event.rows;
    this.offset = event.first;
    if (this.dragFrom) {
      this.refreshDragAndDrop();
    }
  }

  showDetails(rowdata) {
    this.router.navigate(
      [
        this.dataType.substring(0, this.dataType.length - 1),
        rowdata.identifier,
      ],
      { relativeTo: this.route }
    );
  }

  toogleContentVisibility() {
    this.contentVisible = !this.contentVisible;
  }

  onRowSelectChange(event) {
    if (!this.selectOnDoubleClick) {
      this.selectedItems.next(this.selectedRows);
    }
  }

  onRowDoubleClick(event) {
    if (this.selectOnDoubleClick) {
      this.selectedItems.next(this.selectedRows);
    }
    this.rowDoubleClicked.next(event.data);
  }

  public slideChange(event) {
    if (this.slidevalue == 1) {
      this.boxWidth = "100%";
      this.boxHeight = "600px";
    } else if (this.slidevalue == 2) {
      this.boxWidth = "50%";
      this.boxHeight = "350px";
    } else if (this.slidevalue == 3) {
      this.boxWidth = "33%";
      this.boxHeight = "220px";
    } else if (this.slidevalue == 4) {
      this.boxWidth = "25%";
      this.boxHeight = "190px";
    } else if (this.slidevalue == 5) {
      this.boxWidth = "20%";
      this.boxHeight = "130px";
    }
  }
}