import { AfterViewInit, Component, NgZone, OnInit } from "@angular/core";
import { MatDialogRef } from "@angular/material/dialog";
import { Subject, BehaviorSubject } from "rxjs";
import { WidgetComponent } from "../../../widget.metadata";
import { ShopCategoryService } from "../shop-category/shop-category.service";
import { DragAndDropService } from "../../../../components/util/drag-and-drop.service";
import { ActionRequest } from "../../../../components/hal/actionRequest";
import { Result } from "../../../interfaces/list.interfaces";
import { HalService } from "../../../../components/hal/hal.service";

declare var $;
declare var jQuery: any;

@WidgetComponent("nm-shop-category-details-popup")
@Component({
  selector: "nm-shop-category-details-popup.component",
  templateUrl: "./shop-category-details-popup.component.html",
})
export class ShopCategoryDetailsPopupComponent
  implements OnInit, AfterViewInit {
  public title: string;
  public message: string;
  public link: string;
  public category: string;
  public colorListIdentifier: string;

  public totalresults: any[] = [];
  public data: any = {};

  public change: Subject<any[]> = new BehaviorSubject([]);
  public results: Subject<any[]> = new BehaviorSubject([]);
  public total: BehaviorSubject<number> = new BehaviorSubject(0);
  public dataType: string = "dimensions";
  public slidevalue: number = 3;
  public boxWidth: string = "33%";
  public boxHeight: string = "220px";

  public attachActionIdentifier: string;
  public popupfilter: any[];
  public filterselection: any[] = [];
  public filtercount: number = -1;

  public onChange: BehaviorSubject<any> = new BehaviorSubject<any>(2);

  constructor(
    public dialogRef: MatDialogRef<ShopCategoryDetailsPopupComponent>,
    private _shopCategoryService: ShopCategoryService,
    private halService: HalService,
    private zone: NgZone,
    private dragAndDrop: DragAndDropService
  ) {}

  filterOnChange() {
    if (jQuery("#nm-gridlist-category-details").hasClass("ui-sortable")) {
      if (
        !(
          this.filterselection == undefined ||
          this.filterselection.length === 0 ||
          this.filterselection == null
        )
      ) {
        let filtered = this.data["_embedded"][this.dataType].filter(
          (item) => item["all-green"] === this.filterselection
        );
        this.filtercount = filtered.length;
        this.results.next(filtered);
        jQuery("#nm-gridlist-category-details").sortable("disable");
      } else {
        this.filtercount = -1;
        this.results.next(this.data["_embedded"][this.dataType]);
        jQuery("#nm-gridlist-category-details").sortable("enable");
      }
    }
  }

  ngOnInit() {
    this._shopCategoryService
      .getOrderedResults(this.colorListIdentifier)
      .subscribe((data) => {
        this.mapResult(data);
      });
    this.slideChange(null);
  }

  private mapResult(data) {
    this.data = data;
    this.totalresults = data._embedded[this.dataType];
    this.results.next(data._embedded[this.dataType]);
    this.total.next(data._embedded[this.dataType].length);
    this.results.next(data._embedded[this.dataType]);
  }

  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";
    }
  }

  ngAfterViewInit(): void {
    let self = this;

    this.zone.runOutsideAngular(() => {
      let grid = jQuery("#nm-gridlist-category-details");
      if (!!grid.sortable("instance")) {
        grid.sortable("destroy");
      }

      grid.sortable({
        placeholder: "ui-state-placeholder-details",
        cursor: "grabbing",
        revert: false,
        start: function (e, ui) {
          ui.placeholder.css("width", self.boxWidth);
          ui.placeholder.css("cursor", "grabbing");
          ui.placeholder.css("padding-bottom", self.boxHeight);
          for (var item of self.totalresults) {
            if (item.identifier === ui.item["0"].id) {
              self.beginDragging(item);
            }
          }
        },
        stop: function (e, ui) {
          let dragged = self.dragAndDrop.completeDrag();
          let prev = jQuery(ui.item[0]).prev();

          var prevId = null;
          if (!!prev) {
            prevId = prev.attr("id");
          }

          ui.placeholder.remove();
          if (ui.helper) {
            ui.helper.remove();
          }

          if (!dragged) {
            return;
          }

          let draggedColors = <Result[]>dragged.data;
          let identifiers: Set<string> = new Set<string>(
            draggedColors.map((item) => item.identifier)
          );

          // remove moved objects
          let result = Object.assign({}, self.data);
          let dimensions = result._embedded[self.dataType].filter(
            (item) => !identifiers.has(item.identifier)
          );

          let index = !!prevId
            ? dimensions.findIndex((item) => item.identifier == prevId) + 1
            : 0;
          dimensions.splice(index, 0, ...draggedColors);

          result._embedded[self.dataType] = dimensions;

          // find action to save data to ipim
          var action: ActionRequest =
            result._actions[self.attachActionIdentifier];

          // action may be pre-filled from previous execution of the same action
          // reset all values
          if (!prevId) {
            action.payload.anchor = null;
          } else {
            action.payload.anchor = prevId;
          }
          action.payload.identifiers = Array.from(identifiers);

          self.zone.run(() => {
            self._shopCategoryService.setOrderedResults(
              self.colorListIdentifier,
              result
            );
          });

          self.halService
            .execute(this.attachActionIdentifier, action)
            .subscribe();
        },
      });

      grid.disableSelection();
    });
  }

  beginDragging(target): void {
    this.dragAndDrop.registerDrag("category-color-details", [].concat(target));
  }
}