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

import { mergeMap, onErrorResumeNext, takeUntil } from "rxjs/operators";
import {
  Component,
  OnDestroy,
  ChangeDetectionStrategy,
  ChangeDetectorRef,
  NgZone,
} from "@angular/core";
import { TranslateService } from "@ngx-translate/core";
import { WidgetframeService } from "../../../widgetframe/widgetframe.service";
import { WidgetConfig } from "../../../widget.configuration";
import {
  WidgetComponent,
  WidgetId,
  WidgetConfiguration,
  WidgetConfigure,
  WidgetInput,
  WidgetOutput,
} from "../../../widget.metadata";
import { NgUnsubscribe } from "../../../../ng-unsubscribe";
import * as uriTemplates_ from "uri-templates";
const uriTemplates = uriTemplates_;
import { Attribute } from "../../../../components/edit-attribute/attribute";
import { EditAttributeService } from "../../../../components/edit-attribute/edit-attribute.service";
import { HalService } from "../../../../components/hal/index";
import { CustomNotificationService } from "../../../../components/notification/customnotification.service";
import { Asset, AssetContainer } from "../../../../components/image/index";
import { DragAndDropService } from "../../../../components/util/drag-and-drop.service";
import { MatDialog } from "@angular/material/dialog";
import { CopyAssetsPopupComponent } from "./copy-assets-popup.component";

declare var jQuery: any;

/**
 * Used in App myClientCopy.
 * Surrounded by widgetframe
 *
 */
@WidgetComponent("nm-copy-item-attributes")
@Component({
  selector: "nm-copy-item-attributes",
  templateUrl: "./copy-item-attributes.component.html",
  styleUrls: ["./copy-item-attributes.component.scss"],
  providers: [EditAttributeService],
  host: {
    "(window:keydown)": "keydown($event)",
    "(window:keyup)": "keyup($event)",
  },
})
export class CopyItemAttributesWidgetComponent implements OnDestroy {
  public cols: any[];
  public attributes = <any>{};

  public selectedRowsTarget: any[] = [];
  public selectedRowsSource: any[] = [];

  public targetItems: any[];
  public sourceItems: any[];

  public targetItemsGroupedby: any[];
  public sourceItemsGroupedby: any[];

  public selectedGroupByItemSourceValue: string;
  public selectedGroupByItemTargetValue: string;

  public shiftIsPressed: boolean;
  public ctrlIsPressed: boolean;

  public changedAttributes: any[];

  public inputLink: string;

  @WidgetConfiguration()
  public configuration: WidgetConfig;

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

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

  @WidgetInput()
  public selectedLocaleProductSource = new ReplaySubject<any>();

  @WidgetInput()
  public selectedLocaleProductTarget = new ReplaySubject<any>();

  @WidgetInput()
  public selectedGroupByItemSource = new ReplaySubject<any>();

  @WidgetInput()
  public selectedGroupByItemTarget = new ReplaySubject<any>();

  @WidgetOutput("changedAttributesOutput")
  public changedAttributesOutput = new Subject<any>();

  @WidgetOutput("action")
  public action = new Subject<any>();

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

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

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

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

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

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

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

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

  @WidgetId()
  public _id: string;

  public unsubscribe = NgUnsubscribe.create();
  public sub;
  public editLayout: string;
  public boxWidth: string;
  public productNo;
  public selectedDataLocaleString;
  public productLevel: string = "";
  public targetsInput = [];
  public selectedUiLocaleValue: string;

  public assets: AssetContainer[] = [];
  public sourceAssets: AssetContainer[] = [];
  public sourceAssetOriginales: AssetContainer[] = [];
  public targetAssets: AssetContainer[] = [];
  public changedAssets: AssetContainer[] = [];
  public lastSelectedAsset: Asset;
  public selectedAssets: any[];

  public assetRows: any[] = [];

  constructor(
    public _widgetframeService: WidgetframeService,
    public _sourceAttributeService: EditAttributeService,
    public _targetAttributeService: EditAttributeService,
    public _halService: HalService,
    public _notificationService: CustomNotificationService,
    public _dragAndDropService: DragAndDropService,
    private zone: NgZone,
    private translateService: TranslateService,
    public dialog: MatDialog
  ) {
    this.cols = [
      {
        field: "Std_EAN",
        header: "app.ipim-my-client-copy.placeholder.EAN",
        sortable: true,
        filter: true,
      },
      {
        field: "itemNo",
        header: "app.ipim-my-client-copy.placeholder.ItemNumber",
        sortable: true,
        filter: true,
      },
      {
        field: "dim_FARBE",
        header: "app.ipim-my-client-copy.placeholder.Color",
        sortable: true,
        filter: true,
      },
      {
        field: "dim_GROESSE",
        header: "app.ipim-my-client-copy.placeholder.Size",
        sortable: true,
        filter: true,
      },
      {
        field: "image",
        header: "app.ipim-my-client-copy.placeholder.Image",
        sortable: true,
        filter: true,
      },
      {
        field: "manufacturerImage",
        header: "app.ipim-my-client-copy.placeholder.ManufacturerImage",
        sortable: true,
        filter: true,
      },
      {
        field: "searchcolor",
        header: "app.ipim-my-client-copy.placeholder.Searchcolor",
        sortable: true,
        filter: true,
      },
    ];
  }

  addAssetRelationToChangedAssets(assetRelation, selectedRow) {
    let tempSelectedRow = jQuery.extend(true, {}, selectedRow);
    for (let targetIdentifer of selectedRow["targets"]) {
      let matchedAttribute = this.targetItems.filter(
        (attribute) => attribute.itemNo == targetIdentifer
      );
      if (matchedAttribute.length > 0) {
        for (
          let index = 0;
          index < matchedAttribute[0]["_embedded"]["assets"].length;
          index++
        ) {
          if (
            matchedAttribute[0]["_embedded"]["assets"][index].identifier ==
            assetRelation.identifier
          ) {
            matchedAttribute[0]["_embedded"]["assets"][index] = jQuery.extend(
              true,
              {},
              assetRelation
            );
          }
        }
      }
    }

    for (let targetIdentifer of selectedRow["targets"]) {
      let matchedAttribute = this.changedAttributes.filter(
        (attribute) => attribute.targets[0].identifier == targetIdentifer
      );
      if (matchedAttribute.length > 0) {
        for (let i = 0; i < matchedAttribute[0]["values"].length; i++) {
          for (
            let j = 0;
            j < matchedAttribute[0]["values"][i]["_embedded"]["assets"].length;
            j++
          ) {
            if (
              matchedAttribute[0]["values"][i]["_embedded"]["assets"][j]
                .identifier == assetRelation.identifier
            ) {
              matchedAttribute[0]["values"][i]["_embedded"]["assets"][
                j
              ] = jQuery.extend(true, {}, assetRelation);
            }
          }
        }
      } else {
        assetRelation["assets"] = [];
        assetRelation["assets"] = jQuery.extend(
          true,
          [],
          assetRelation["_embedded"]["assets"]
        );

        let payload = {};
        let target = {};
        target["level"] = "item";
        target["identifier"] = targetIdentifer;
        payload["targets"] = [];
        payload["targets"].push(target);
        payload["locale"] = this.selectedUiLocaleValue;
        payload["values"] = [];
        payload["values"].push(assetRelation);
        this.changedAttributes.push(payload);
      }
    }
    this.targetItemsGroupedby = this.groupItems(
      this.targetItems,
      this.selectedGroupByItemTargetValue
    );

    this.changedAttributesOutput.next(this.changedAttributes);
  }

  @WidgetConfigure()
  protected configureWidget(configuration: WidgetConfig) {
    this.changedAttributes = [];
    this.sourceuri.subscribe((data) => {
      console.log("ITEMS", data);
    });

    this.resetTargetItemAttributes
      .pipe(takeUntil(this.unsubscribe))
      .subscribe((resetTargetItemAttributes) => {
        this.selectedRowsTarget = [];
        this.targetItems = [];
        this.targetItemsGroupedby = [];
        this.changedAttributes = [];
      });

    this.resetSourceItemAttributes
      .pipe(takeUntil(this.unsubscribe))
      .subscribe((resetSourceItemAttributes) => {
        this.selectedRowsSource = [];
        this.sourceItems = [];
        this.sourceItemsGroupedby = [];
      });

    this.clearChangedAttributes
      .pipe(takeUntil(this.unsubscribe))
      .subscribe((clearChangedAttributes) => {
        console.log("CLEAR changedAttributes", this.changedAttributes);
        this.changedAttributes = [];
        // this.changedAttributesOutput.next(this.changedAttributes);
      });

    this._sourceAttributeService
      .getCopyAttributeEvent()
      .pipe(takeUntil(this.unsubscribe))
      .subscribe((attribute) => {
        let temptargetItem = jQuery.extend(true, {}, this.selectedRowsTarget);
        for (let targetIdentifer of temptargetItem["targets"]) {
          let matchedAttribute = this.targetItems.filter(
            (attribute) => attribute.itemNo == targetIdentifer
          );
          if (matchedAttribute.length > 0) {
            matchedAttribute[0].attributes.default[1].source = jQuery.extend(
              true,
              [],
              attribute.source
            );
            matchedAttribute[0]["searchcolor"] = attribute.source[0].value;
            this._targetAttributeService.setTriggerSourceRefreshEvent(
              matchedAttribute[0].attributes.default[1]
            );
          }
        }

        for (let targetIdentifer of temptargetItem["targets"]) {
          let matchedAttribute = this.changedAttributes.filter(
            (attribute) => attribute.targets[0].identifier == targetIdentifer
          );
          if (matchedAttribute.length > 0) {
            let valueFound: boolean = false;
            for (let k = 0; k < matchedAttribute[0].values.length; k++) {
              if (
                matchedAttribute[0].values[k].identifier ===
                attribute.identifier
              ) {
                matchedAttribute[0].values[k] == attribute;
                valueFound = true;
              }
            }

            if (!valueFound) {
              matchedAttribute[0].values.push(attribute);
            }

            temptargetItem["targets"].splice(
              temptargetItem["targets"].indexOf(targetIdentifer),
              1
            );
          } else {
            let payload = {};
            let target = {};
            target["level"] = "item";
            target["identifier"] = targetIdentifer;
            payload["targets"] = [];
            payload["targets"].push(target);
            payload["locale"] = this.selectedUiLocaleValue;
            payload["values"] = [];
            payload["values"].push(attribute);

            this.changedAttributes.push(payload);
          }
        }
        this.targetItemsGroupedby = this.groupItems(
          this.targetItems,
          this.selectedGroupByItemTargetValue
        );
        this.changedAttributesOutput.next(this.changedAttributes);
      });

    this.selectedUiLocale
      .pipe(takeUntil(this.unsubscribe))
      .subscribe((selectedUiLocale) => {
        this.selectedUiLocaleValue = selectedUiLocale;
      });

    this._targetAttributeService
      .getAttributeChangedEvent()
      .pipe(takeUntil(this.unsubscribe))
      .subscribe((attribute) => {
        let temptargetItem = jQuery.extend(true, {}, this.selectedRowsTarget);
        for (let targetIdentifer of temptargetItem["targets"]) {
          let matchedAttribute = this.targetItems.filter(
            (attribute) => attribute.itemNo == targetIdentifer
          );
          if (matchedAttribute.length > 0) {
            matchedAttribute[0].attributes.default[1].source = jQuery.extend(
              true,
              [],
              attribute.source
            );
            matchedAttribute[0]["searchcolor"] = attribute.source[0].value;
            // this._targetAttributeService.setTriggerSourceRefreshEvent(matchedAttribute[0].attributes.default[1]);
          }
        }

        for (let targetIdentifer of temptargetItem["targets"]) {
          let matchedAttribute = this.changedAttributes.filter(
            (attribute) => attribute.targets[0].identifier == targetIdentifer
          );
          if (matchedAttribute.length > 0) {
            let valueFound: boolean = false;
            for (let k = 0; k < matchedAttribute[0].values.length; k++) {
              if (
                matchedAttribute[0].values[k].identifier ===
                attribute.identifier
              ) {
                matchedAttribute[0].values[k] == attribute;
                valueFound = true;
              }
            }

            if (!valueFound) {
              matchedAttribute[0].values.push(attribute);
            }

            temptargetItem["targets"].splice(
              temptargetItem["targets"].indexOf(targetIdentifer),
              1
            );
          } else {
            let payload = {};
            let target = {};
            target["level"] = "item";
            target["identifier"] = targetIdentifer;
            payload["targets"] = [];
            payload["targets"].push(target);
            payload["locale"] = this.selectedUiLocaleValue;
            payload["values"] = [];
            payload["values"].push(attribute);

            this.changedAttributes.push(payload);
          }
        }
        this.targetItemsGroupedby = this.groupItems(
          this.targetItems,
          this.selectedGroupByItemTargetValue
        );
        this.changedAttributesOutput.next(this.changedAttributes);
      });

    var sourceObservable = observableCombineLatest(
      this.sourceuri.asObservable(),
      function (uri) {
        let template = uriTemplates(uri);
        let uriParams = {};

        uriParams["context"] = "my-clientCopy";
        return template.fill(uriParams);
      }
    ).pipe(
      takeUntil(this.unsubscribe),
      mergeMap((href) =>
        this._widgetframeService
          .getData(href)
          .pipe(onErrorResumeNext(this.resetWidget()))
      )
    );

    sourceObservable.pipe(takeUntil(this.unsubscribe)).subscribe(
      (data) => {
        let tempitems: any[] = data["_embedded"]["items"];
        for (var item of tempitems) {
          if (item.attributes.default !== undefined) {
            for (var attribute of item.attributes.default) {
              item[attribute.identifier] = attribute.value;
            }
          }
          if (item.attributes.dimensions !== undefined) {
            for (var attribute of item.attributes.dimensions) {
              item[attribute.identifier] = attribute.value;
            }
          }

          if (item["_embedded"] != undefined) {
            for (let assetRelation of item["_embedded"]["assets"]) {
              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;
              }
            }
          }
        }

        this.sourceItems = jQuery.extend(true, [], tempitems);
        this.sourceItemsGroupedby = jQuery.extend(true, [], tempitems);

        this.selectedGroupByItemSource.subscribe(
          (selectedGroupByItemSource) => {
            if (this.sourceItems.length > 0) {
              this.selectedGroupByItemSourceValue = selectedGroupByItemSource;
              this.sourceItemsGroupedby = this.groupItems(
                this.sourceItems,
                selectedGroupByItemSource
              );
            }
          }
        );
      },
      (error) => {
        console.log(error);
      }
    );

    var targetObservable = observableCombineLatest(
      this.targeturi.asObservable(),
      function (uri) {
        let template = uriTemplates(uri);
        let uriParams = {};

        uriParams["context"] = "my-clientCopy";
        return template.fill(uriParams);
      }
    ).pipe(
      takeUntil(this.unsubscribe),
      mergeMap((href) =>
        this._widgetframeService
          .getData(href)
          .pipe(onErrorResumeNext(this.resetWidget()))
      )
    );

    targetObservable.subscribe(
      (data) => {
        let tempitems: any[] = data["_embedded"]["items"];
        for (var item of tempitems) {
          if (item.attributes.default !== undefined) {
            for (var attribute of item.attributes.default) {
              item[attribute.identifier] = attribute.value;
            }
          }
          if (item.attributes.dimensions !== undefined) {
            for (var attribute of item.attributes.dimensions) {
              item[attribute.identifier] = attribute.value;
            }
          }

          if (item["_embedded"] != undefined) {
            for (let assetRelation of item["_embedded"]["assets"]) {
              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;
              }
            }
          }
        }
        this.targetItems = jQuery.extend(true, [], tempitems);
        this.targetItemsGroupedby = jQuery.extend(true, [], tempitems);
        this.selectedGroupByItemTarget.subscribe(
          (selectedGroupByItemTarget) => {
            if (this.targetItems.length > 0) {
              this.selectedGroupByItemTargetValue = selectedGroupByItemTarget;
              this.targetItemsGroupedby = this.groupItems(
                this.targetItems,
                this.selectedGroupByItemTargetValue
              );
            }
          }
        );
      },
      (error) => {
        console.log(error);
      }
    );
  }

  hashCode(str) {
    var hash = 0;
    if (str.length == 0) return hash;
    for (let i = 0; i < str.length; i++) {
      let char = str.charCodeAt(i);
      hash = (hash << 5) - hash + char;
      hash = hash & hash; // Convert to 32bit integer
    }
    return hash.toString();
  }

  groupItems(items, selectedGroupByItemAttribute: any) {
    let self = this;
    let tempgroupedbyItems = [];

    if (
      selectedGroupByItemAttribute === "notGrouped" ||
      selectedGroupByItemAttribute === "Std_EAN" ||
      selectedGroupByItemAttribute === "ItemNo"
    ) {
      for (let item of items) {
        item["targets"] = [];
        item["targets"].push(item["itemNo"]);
        if (item["attributes"] && item["attributes"].default) {
          for (let attribute of item["attributes"].default) {
            if (attribute.identifier === "searchcolor") {
              attribute.targets = [];
              attribute.targets.push(item["itemNo"]);
            }
          }
        }
      }
      this.clearAllSelections();
      return items;
    }
    let targetItemsToDisplay = {};

    if (
      selectedGroupByItemAttribute === "manufacturerImage" ||
      selectedGroupByItemAttribute === "image"
    ) {
      targetItemsToDisplay = items.reduce(function (r, a) {
        for (const assetRelaion of a._embedded.assets) {
          if (assetRelaion.identifier == selectedGroupByItemAttribute) {
            if (
              r[self.hashCode(JSON.stringify(assetRelaion._embedded.assets))] ==
              undefined
            ) {
              r[
                self.hashCode(JSON.stringify(assetRelaion._embedded.assets))
              ] = [];
            }
            r[
              self.hashCode(JSON.stringify(assetRelaion._embedded.assets))
            ].push(a);
          }
        }
        return r;
      }, Object.create(null));
    } else {
      targetItemsToDisplay = items.reduce(function (r, a) {
        r[a[selectedGroupByItemAttribute]] =
          r[a[selectedGroupByItemAttribute]] || [];
        r[a[selectedGroupByItemAttribute]].push(a);
        return r;
      }, Object.create(null));
    }
    for (var groupedByValue in targetItemsToDisplay) {
      let groupedItem = {};
      groupedItem["tooltips"] = {};

      // init all properties... muss das sein ?!
      for (let item of targetItemsToDisplay[groupedByValue]) {
        for (const attributeKey in item) {
          if (item.hasOwnProperty(attributeKey)) {
            groupedItem[attributeKey] = "";
            groupedItem["tooltips"][attributeKey] = "";
          }
        }
      }

      groupedItem["targets"] = [];
      // for (let item of targetItemsToDisplay[groupedByValue]) {
      for (
        let index = 0;
        index < targetItemsToDisplay[groupedByValue].length;
        index++
      ) {
        if (index === 0) {
          groupedItem["attributes"] =
            targetItemsToDisplay[groupedByValue][index]["attributes"];
          for (let attribute of groupedItem["attributes"].default) {
            if (attribute.identifier === "searchcolor") {
              attribute.targets = [];
            }
          }
          groupedItem["_embedded"] =
            targetItemsToDisplay[groupedByValue][index]["_embedded"];
        }
        for (const attributeKey in targetItemsToDisplay[groupedByValue][
          index
        ]) {
          if (
            targetItemsToDisplay[groupedByValue][index].hasOwnProperty(
              attributeKey
            )
          ) {
            if (
              targetItemsToDisplay[groupedByValue][index][attributeKey] !=
              undefined
            ) {
              if (attributeKey == "itemNo") {
                groupedItem["targets"].push(
                  targetItemsToDisplay[groupedByValue][index][attributeKey]
                );

                for (let attribute of groupedItem["attributes"].default) {
                  if (attribute.identifier === "searchcolor") {
                    attribute.targets.push(
                      targetItemsToDisplay[groupedByValue][index][attributeKey]
                    );
                  }
                }
              }

              if (
                typeof targetItemsToDisplay[groupedByValue][index][
                  attributeKey
                ] === "string" ||
                targetItemsToDisplay[groupedByValue][index][
                  attributeKey
                ] instanceof String
              ) {
                groupedItem["tooltips"][attributeKey] += targetItemsToDisplay[
                  groupedByValue
                ][index][attributeKey].trim();
                if (index === 0) {
                  groupedItem[attributeKey] = targetItemsToDisplay[
                    groupedByValue
                  ][index][attributeKey].trim();
                }
                if (index < targetItemsToDisplay[groupedByValue].length - 1) {
                  groupedItem["tooltips"][attributeKey] += ", ";
                }
              }
            }
          }
        }
        groupedItem[selectedGroupByItemAttribute] = groupedByValue;
      }
      tempgroupedbyItems.push(groupedItem);
    }
    this.clearAllSelections();
    return tempgroupedbyItems;
  }
  resetWidget() {
    return null;
  }
  ngOnDestroy() {
    this.unsubscribe.destroy();
  }
  setBoxWidth(index) {
    return 98 / index + "%";
  }

  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.clearAllSelections();
      this.toggleRow(asset, assetRelation);
    }
  }

  selectedAssetById(identifier, side, assetRelationIdentifer) {
    console.log("select", identifier, side, assetRelationIdentifer);
    this.clearAllSelections();
    if (
      side === "sourceAssetRelation" &&
      this.sourceItemsGroupedby.length > 0
    ) {
      for (let item of this.sourceItemsGroupedby) {
        if (this.selectedRowsSource[0]["itemNo"] === item.itemNo) {
          for (let assetRelation of item._embedded.assets) {
            for (let asset of assetRelation._embedded.assets) {
              if (asset.title === identifier) {
                asset["selected"] = true;
                this.selectedAssets.push(asset);
              }
            }
          }
        }
      }
    }

    if (
      side === "targetAssetRelation" &&
      this.targetItemsGroupedby.length > 0
    ) {
      for (let item of this.targetItemsGroupedby) {
        if (this.selectedRowsTarget["itemNo"] === item.itemNo) {
          for (let assetRelation of item._embedded.assets) {
            for (let asset of assetRelation._embedded.assets) {
              if (asset.title === identifier) {
                asset["selected"] = true;
                this.selectedAssets.push(asset);
              }
            }
          }
        }
      }
    }
  }

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

    if (this.sourceItemsGroupedby) {
      if (this.sourceItemsGroupedby.length > 0) {
        for (let item of this.sourceItemsGroupedby) {
          if (item._embedded && item._embedded.assets) {
            for (let assetRelation of item._embedded.assets) {
              if (assetRelation._embedded && assetRelation._embedded.assets) {
                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
    );

    console.log(
      " this.selectedAssets in toggle",
      asset,
      assetRelation,
      this.selectedAssets
    );
    this.lastSelectedAsset = asset;
    //this._changeDetectorRef.markForCheck();
  }

  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;
    this.addAssetRelationToChangedAssets(
      assetRelation,
      this.selectedRowsTarget
    );
  }

  editAssets() {
    let dialogRef = this.dialog.open(CopyAssetsPopupComponent, {
      // width: '250px',
      data: {
        selectedRowsSource: this.selectedRowsSource,
        selectedRowsTarget: this.selectedRowsTarget,
      },
    });

    dialogRef.afterClosed().subscribe((assetrelations) => {
      if (assetrelations) {
        for (const assetrelation of assetrelations) {
          this.addAssetRelationToChangedAssets(
            assetrelation,
            this.selectedRowsTarget
          );
        }
      }
    });
  }

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

        jQuery(targetcontainer).sortable({
          revert: false,
          tolerance: "touch",
          placeholder: "ui-state-asset-placeholder",
          cursor: "grabbing",
          delay: 50,
          scroll: true,
          scrollSensitivity: 80,
          scrollSpeed: 3,
          containment: "document",
          //  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) {
            console.log("this.selectedAssets in start", self.selectedAssets);
            var elements = ui.item
              .siblings(".selected.hidden")
              .not(".ui-sortable-placeholder");
            self._dragAndDropService.registerDrag(
              "target-item-assets",
              jQuery.extend(true, [], self.selectedAssets)
            );
          },

          over: function (event, ui) {
            console.log("over", event, ui);
            jQuery(event.target).addClass("nm-small-drop-target");
          },

          out: function (event, ui) {
            console.log("out", event, ui);
            jQuery(event.target).removeClass("nm-small-drop-target");
          },
          stop: function (e, ui) {
            let dragged = self._dragAndDropService.completeDrag();
            let draggedAssets = <Asset[]>dragged.data;

            if (!dragged) {
              return;
            }

            if (draggedAssets[0] === undefined) {
              return;
            }

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

            if (ui.item && dragged) {
              ui.item.remove();
            }

            ui.item.siblings(".hidden").remove();
            let assetRelationIdentifier =
              draggedAssets[0]["assetRelationIdentifier"];
            let titles: Set<string> = new Set<string>(
              draggedAssets.map((item) => item.title)
            );

            for (let assetRelation of self.selectedRowsTarget["_embedded"][
              "assets"
            ]) {
              if (assetRelation.identifier === assetRelationIdentifier) {
                //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-item-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);
                }
                */

                console.log("stop", assetRelation, self.selectedRowsTarget);
                self.addAssetRelationToChangedAssets(
                  assetRelation,
                  self.selectedRowsTarget
                );
              }
            }

            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: ".ui-state-highlight  ul.target-asset-column",
          scroll: true,
          scrollSensitivity: 80,
          scrollSpeed: 3,
          containment: "document",

          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-item-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();
  }

  targetTableRowSelectChange(event) {
    if (this.targetItemsGroupedby.length > 0) {
      for (let item of this.targetItemsGroupedby) {
        if (item._embedded && item._embedded.assets) {
          for (let assetRelation of item._embedded.assets) {
            if (assetRelation._embedded.assets) {
              for (let asset of assetRelation._embedded.assets) {
                asset["selected"] = false;
              }
            }
          }
        }
      }
    }
    //  this.refeshDnD();
  }
  sourceTableRowSelectChange(event) {
    if (this.sourceItemsGroupedby) {
      if (this.sourceItemsGroupedby.length > 0) {
        for (let item of this.sourceItemsGroupedby) {
          if (item._embedded && item._embedded.assets) {
            for (let assetRelation of item._embedded.assets) {
              if (assetRelation._embedded.assets) {
                for (let asset of assetRelation._embedded.assets) {
                  asset["selected"] = false;
                }
              }
            }
          }
        }
      }
    }
    // this.refeshDnD();
  }
  delteAssets(assetRelation) {
    assetRelation._embedded.assets = [];
    assetRelation["replaced"] = true;
    this.addAssetRelationToChangedAssets(
      assetRelation,
      this.selectedRowsTarget
    );
  }

  trackByFn(index, item) {
    return item.itemNo; // or item.id
  }
}