import {
  AfterViewInit,
  Component,
  EventEmitter,
  Input,
  NgZone,
  OnDestroy,
  OnInit,
  Output,
  Inject,
} from "@angular/core";
import { Subject, Observable, BehaviorSubject } from "rxjs";
import { WidgetComponent } from "../../../widget.metadata";
import { Asset, AssetContainer } from "../../../../components/image/index";
import { HalService } from "../../../../components/hal/hal.service";
import { MatDialogRef, MAT_DIALOG_DATA } from "@angular/material/dialog";
import { NgUnsubscribe } from "../../../../ng-unsubscribe";
import { CustomNotificationService } from "../../../../components/notification/customnotification.service";
import { DragAndDropService } from "../../../../components/util/drag-and-drop.service";
import { TranslateService } from "@ngx-translate/core";

declare var $;
declare var jQuery: any;

@WidgetComponent("nm-copy-assets-popup")
@Component({
  selector: "nm-copy-assets-popup.component",
  templateUrl: "./copy-assets-popup.component.html",
  host: {
    "(window:keydown)": "keydown($event)",
    "(window:keyup)": "keyup($event)",
  },
})
export class CopyAssetsPopupComponent implements OnInit, AfterViewInit {
  selectedAssets: any[];
  public cols: any[];
  public assets: AssetContainer[] = [];
  public sourceAssets: AssetContainer[] = [];
  public sourceAssetOriginales: AssetContainer[] = [];
  public targetAssetOriginales: AssetContainer[] = [];
  public targetAssets: AssetContainer[] = [];
  public changedAssets: AssetContainer[] = [];
  public lastSelectedAsset: Asset;

  public assetRelationsReturn: any[] = [];

  public assetRows: any[] = [];

  public unsubscribe = NgUnsubscribe.create();
  public productNo;
  public selectedDataLocaleString;
  public shiftIsPressed: boolean;
  public ctrlIsPressed: boolean;

  public changedAssetsOutput = new Subject<any>();

  constructor(
    public dialogRef: MatDialogRef<CopyAssetsPopupComponent>,
    @Inject(MAT_DIALOG_DATA) public data: any,
    private halService: HalService,
    private zone: NgZone,
    public _halService: HalService,
    public _notificationService: CustomNotificationService,
    public _dragAndDropService: DragAndDropService,
    private translateService: TranslateService
  ) {}

  ngOnInit() {
    if (
      this.data.selectedRowsTarget._embedded &&
      this.data.selectedRowsTarget._embedded.assets.length > 0
    ) {
      this.targetAssetOriginales = this.data.selectedRowsTarget._embedded.assets;
      this.initTargetAsset();
    }
  }

  ngAfterViewInit(): void {}

  initSourceAsset() {
    if (
      this.data.selectedRowsSource[0]._embedded &&
      this.data.selectedRowsSource[0]._embedded.assets.length > 0
    ) {
      this.sourceAssetOriginales = this.data.selectedRowsSource[0]._embedded.assets;
    }

    this.sourceAssets = [];
    this.sourceAssets = jQuery.extend(true, [], this.sourceAssetOriginales);
    for (let assetRelationRow of this.assetRows) {
      let matchedAttribute = this.sourceAssets.filter(
        (attribute) => attribute.identifier === assetRelationRow["identifier"]
      );
      if (matchedAttribute.length > 0) {
        assetRelationRow["sourceAssetRelation"] = matchedAttribute[0];
        this.sourceAssets.splice(
          this.sourceAssets.indexOf(matchedAttribute[0]),
          1
        );
      }
    }

    for (const assetRelation of this.sourceAssets) {
      let assetRelationrow = {};
      assetRelationrow["identifier"] = assetRelation.identifier;
      assetRelationrow["description"] = assetRelation.description;
      assetRelationrow["targetAssetRelation"] = null;
      assetRelationrow["sourceAssetRelation"] = assetRelation;
      this.assetRows.push(assetRelationrow);
    }
  }

  initTargetAsset() {
    this.assetRows = [];
    this.targetAssets = jQuery.extend(true, [], this.targetAssetOriginales);

    for (let assetRelation of this.targetAssets) {
      if (assetRelation._embedded === undefined) {
        assetRelation._embedded = {};
        assetRelation._embedded.assets = [];
      }
      assetRelation._embedded.assets.sort(function (a, b) {
        return a["sequence"] - b["sequence"];
      });
      for (let asset of assetRelation._embedded.assets) {
        asset["assetRelationIdentifier"] = assetRelation.identifier;
      }
    }

    for (const assetRelation of this.targetAssets) {
      let assetRelationrow = {};
      assetRelationrow["identifier"] = assetRelation.identifier;
      assetRelationrow["description"] = assetRelation.description;
      assetRelationrow["targetAssetRelation"] = assetRelation;
      assetRelationrow["sourceAssetRelation"] = null;
      this.assetRows.push(assetRelationrow);
    }

    if (this.data.selectedRowsSource[0]) {
      this.initSourceAsset();
    }

    this.changedAssets = [];
    this.changedAssetsOutput.next(this.changedAssets);
    this.refeshDnD();
  }

  imageClick(index, asset, assetRelation) {
    if (this.ctrlIsPressed) {
      this.toggleRow(asset, assetRelation);
    }

    if (this.shiftIsPressed) {
      this.selectRowsBetweenIndexes(assetRelation, [
        assetRelation._embedded["assets"].indexOf(this.lastSelectedAsset),
        index,
      ]);
    }

    if (!this.ctrlIsPressed && !this.shiftIsPressed) {
      this.clearAllOtherSelectedRows(index, assetRelation);
      this.toggleRow(asset, assetRelation);
    }
  }

  selectedAssetById(identifier, side, assetRelationIdentifer) {
    this.clearAllSelections();

    for (let assetRelationRow of this.assetRows) {
      if (assetRelationRow.identifier == assetRelationIdentifer) {
        for (let asset of assetRelationRow[side]["_embedded"]["assets"]) {
          if (asset.title === identifier) {
            asset["selected"] = true;
            this.selectedAssets.push(asset);
          }
        }
      }
    }
  }

  clearAllOtherSelectedRows(index, assetRelation) {
    this.selectedAssets = [];
    for (var asset of assetRelation._embedded["assets"]) {
      if (!(index === assetRelation._embedded["assets"].indexOf(asset)))
        asset["selected"] = false;
    }
  }

  clearAllSelections() {
    this.selectedAssets = [];
    if (this.sourceAssets.length > 0) {
      for (let assetRelation of this.sourceAssets) {
        for (let asset of assetRelation._embedded.assets) {
          asset["selected"] = false;
        }
      }
    }
    if (this.targetAssets.length > 0) {
      for (let assetRelation of this.targetAssets) {
        for (let asset of assetRelation._embedded.assets) {
          asset["selected"] = false;
        }
      }
    }
  }

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

    for (var i = indexes[0]; i <= indexes[1]; i++) {
      assetRelation._embedded["assets"][i]["selected"] = true;
    }
    this.selectedAssets = assetRelation._embedded["assets"].filter(
      (row) => row["selected"] == true
    );
  }

  toggleRow(asset, assetRelation) {
    asset["selected"] = !asset["selected"];
    this.selectedAssets = assetRelation._embedded["assets"].filter(
      (row) => row["selected"] == true
    );
    this.lastSelectedAsset = asset;
  }

  keydown(event: any) {
    if (event.keyCode === 16) {
      this.shiftIsPressed = true;
    }
    if (event.keyCode === 17) {
      this.ctrlIsPressed = true;
    }
  }

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

  copyAssets(assetRelation) {
    assetRelation["replaced"] = true;

    for (let assetRelationRow of this.assetRows) {
      if (assetRelationRow.identifier == assetRelation.identifier) {
        assetRelationRow["targetAssetRelation"] = jQuery.extend(
          true,
          [],
          assetRelation
        );
      }
    }
    this.addAssetRelationToChangedAssets(assetRelation);
    this.refeshDnD();
  }

  delteAssets(assetRelation) {
    assetRelation._embedded.assets = [];
    assetRelation["replaced"] = true;
    this.addAssetRelationToChangedAssets(assetRelation);
  }

  refeshDnD(): void {
    let self = this;
    this.zone.runOutsideAngular(() => {
      setTimeout(() => {
        let sourcecontainer = jQuery(
          "nm-copy-assets-popup ul.source-asset-column > li"
        );
        let targetcontainer = jQuery(
          "nm-copy-assets-popup ul.target-asset-column"
        );

        jQuery(targetcontainer).sortable({
          revert: false,
          tolerance: "touch",
          placeholder: "ui-state-asset-placeholder",
          cursor: "grabbing",
          delay: 1,
          refreshPositions: true,
          helper: function (e, item) {
            let selected = jQuery(this)
              .closest("ul.target-asset-column")
              .find(".ui-state-selected");
            if (selected.length === 0) {
              self.selectedAssetById(
                item.context.id,
                "targetAssetRelation",
                jQuery(this).data("ari")
              );
              selected = item;
            }

            var container = jQuery("<div/>").attr(
              "id",
              "draggingContainerImage"
            );
            container.append(selected.clone());
            item.siblings(".ui-state-selected").addClass("hidden");
            return container;
          },

          start: function (event, ui) {
            var elements = ui.item
              .siblings(".selected.hidden")
              .not(".ui-sortable-placeholder");
            self._dragAndDropService.registerDrag(
              "target-product-assets",
              jQuery.extend(true, [], self.selectedAssets)
            );
          },

          stop: function (e, ui) {
            let taegetAssetRelationIdentifier = jQuery(e.target).attr(
              "data-ari"
            );
            let dragged = self._dragAndDropService.completeDrag();
            let draggedAssets = <Asset[]>dragged.data;

            let prev = jQuery(ui.item[0]).prev();
            let prevId = null;
            if (prev.length > 0) {
              prevId = jQuery(prev[0]).attr("id").trim();
            }
            ui.placeholder.remove();
            if (ui.helper) {
              ui.helper.remove();
            }
            ui.item.siblings(".hidden").remove();

            if (!dragged) {
              return;
            }

            if (draggedAssets[0] === undefined) {
              return;
            }
            if (ui.item && dragged) {
              ui.item.remove();
            }

            let assetRelationIdentifier =
              draggedAssets[0]["assetRelationIdentifier"];

            let titles: Set<string> = new Set<string>(
              draggedAssets.map((item) => item.title)
            );
            for (let assetRelation of self.targetAssets) {
              if (taegetAssetRelationIdentifier === assetRelation.identifier) {
                //let result = Object.assign({}, assetRelation);
                let assets = assetRelation._embedded["assets"].filter(
                  (item) => !titles.has(item.title)
                );
                let assetCount = assets.length;

                if (
                  assetCount < assetRelation._embedded["assets"].length &&
                  dragged.source === "source-product-assets"
                ) {
                  self._notificationService.create(
                    self.translateService.instant(
                      "app.ipim-my-client-copy.asset-already-available.title"
                    ),
                    self.translateService.instant(
                      "app.ipim-my-client-copy.asset-already-available.message"
                    ),
                    "ERROR"
                  );
                }

                let index = !!prevId
                  ? assets.findIndex((item) => item.title == prevId) + 1
                  : 0;
                assets.splice(index, 0, ...draggedAssets);
                assetRelation._embedded["assets"] = assets;
                if (assetRelation._embedded["assets"].length === 0) {
                  assets.splice(index, 0, ...draggedAssets);
                }
                self.addAssetRelationToChangedAssets(assetRelation);
              }
            }

            jQuery(".nm-attribute-list-asset.hidden").remove();

            jQuery(targetcontainer).sortable("refresh");
            jQuery(targetcontainer).sortable("refreshPositions");
            jQuery(prev[0]).click();

            jQuery("li").each(function () {
              jQuery(this).removeClass("ui-state-selected");
            });

            self.zone.run(() => {
              // self._changeDetectorRef.markForCheck();
            });
          },
        });

        let selected;

        jQuery(sourcecontainer).draggable({
          connectToSortable: "ul.target-asset-column",

          helper: function (e) {
            if (
              jQuery(this)
                .closest("ul.source-asset-column")
                .find(".ui-state-selected").length === 0
            ) {
              self.selectedAssetById(
                e["currentTarget"]["id"],
                "sourceAssetRelation",
                jQuery(this).data("ari")
              );
            }

            selected = jQuery(this)
              .closest("ul.source-asset-column")
              .find(".ui-state-selected");
            if (selected.length === 0) {
              selected = jQuery(this);
            }

            var container = jQuery("<div/>").attr(
              "id",
              "draggingContainerImage"
            );
            container.append(selected.clone());
            return container;
          },

          revert: "invalid",
          tolerance: "touch",
          start: function (event, ui) {
            self._dragAndDropService.registerDrag(
              "source-product-assets",
              jQuery.extend(true, [], self.selectedAssets)
            );
          },
        });

        //   jQuery(sourcecontainer).draggable('instance').scssPosition = 'absolute';
        jQuery("ul, li").disableSelection();
        this.lastSelectedAsset = null;
        this.selectedAssets = [];
      }, 1);
    });

    // this._changeDetectorRef.markForCheck();
  }

  addAssetRelationToChangedAssets(assetRelation) {
    this.assetRelationsReturn.push(assetRelation);
  }
}