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

import {
  onErrorResumeNext,
  distinctUntilChanged,
  takeUntil,
  mergeMap,
} from "rxjs/operators";
import {
  Component,
  OnDestroy,
  NgZone,
  AfterViewInit,
  ChangeDetectionStrategy,
  ChangeDetectorRef,
} from "@angular/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 { EditAttributeService } from "../../../../components/edit-attribute/edit-attribute.service";
import { Asset, AssetContainer } from "../../../../components/image/index";
import { HalService } from "../../../../components/hal/index";
import { CustomNotificationService } from "../../../../components/notification/customnotification.service";
import { DragAndDropService } from "../../../../components/util/drag-and-drop.service";
import { TranslateService } from "@ngx-translate/core";

declare var jQuery: any;

@WidgetComponent("nm-copy-product-assets")
@Component({
  selector: "nm-copy-product-assets",
  templateUrl: "./copy-product-assets.component.html",
  styleUrls: ["./copy-product-assets.component.scss"],
  providers: [EditAttributeService],
  changeDetection: ChangeDetectionStrategy.OnPush,
  host: {
    "(window:keydown)": "keydown($event)",
    "(window:keyup)": "keyup($event)",
  },
})
export class CopyProductAssetsWidgetComponent implements OnDestroy {
  selectedAssets: any[];
  public cols: any[];
  public assets: AssetContainer[] = [];
  public sourceAssets: AssetContainer[] = [];
  public sourceAssetOriginales: AssetContainer[] = [];
  public targetAssets: AssetContainer[] = [];
  public changedAssets: AssetContainer[] = [];
  public lastSelectedAsset: Asset;

  public assetRows: any[] = [];

  @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>();

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

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

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

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

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

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

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

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

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

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

  @WidgetId()
  public _id: string;

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

  constructor(
    public _widgetframeService: WidgetframeService,
    public _sourceAttributeService: EditAttributeService,
    public _targetAttributeService: EditAttributeService,
    public _halService: HalService,
    public _notificationService: CustomNotificationService,
    public _dragAndDropService: DragAndDropService,
    private zone: NgZone,
    private _changeDetectorRef: ChangeDetectorRef,
    private translateService: TranslateService
  ) {}
  @WidgetConfigure()
  protected configureWidget(configuration: WidgetConfig) {
    this.changedAssets = [];

    this.resetSourceAttributes.subscribe((data) => {
      let targetAttributeStillThere = false;
      for (const assetRelationrow of this.assetRows) {
        assetRelationrow["sourceAssetRelation"] = null;

        if (assetRelationrow["targetAssetRelation"] != null) {
          targetAttributeStillThere = true;
        }
      }

      if (!targetAttributeStillThere) {
        this.assetRows = [];
      }

      this.sourceUri.next(" ");
      this._changeDetectorRef.markForCheck();
    });

    this.resetTargetAttributes
      .pipe(takeUntil(this.unsubscribe))
      .subscribe((data) => {
        let sourceAttributeStillThere = false;
        for (const assetRelationrow of this.assetRows) {
          assetRelationrow["targetAssetRelation"] = null;

          if (assetRelationrow["sourceAssetRelation"] != null) {
            sourceAttributeStillThere = true;
          }
        }
        if (!sourceAttributeStillThere) {
          this.assetRows = [];
        }

        this.targetAssets = [];
        this.targetUri.next(" ");
        this._changeDetectorRef.markForCheck();
      });

    this._targetAttributeService
      .getAttributeChangedEvent()
      .pipe(takeUntil(this.unsubscribe))
      .subscribe((attribute) => {
        this.changedAssetsOutput.next(this.changedAssets);
      });

    var sourceObservable = observableCombineLatest(
      this.selectedLocaleProductSource
        .asObservable()
        .pipe(distinctUntilChanged()),
      this.selectedUiLocale.asObservable().pipe(distinctUntilChanged()),
      this.sourceUri.asObservable(),

      function (selectedLocaleProductSource, selectedUiLocale, uri) {
        let template = uriTemplates(uri);
        let uriParams = {};

        uriParams["context"] = "my-texter";
        uriParams["locale"] = selectedUiLocale;
        uriParams["data-locale"] = selectedLocaleProductSource;

        return template.fill(uriParams);
      }
    ).pipe(
      takeUntil(this.unsubscribe),
      mergeMap((href) =>
        this._widgetframeService
          .getData(href)
          .pipe(onErrorResumeNext(this.resetWidget()))
      )
    );

    sourceObservable.subscribe(
      (data) => {
        if (data["_embedded"] !== undefined) {
          this.assets = jQuery.extend(
            true,
            [],
            data["_embedded"]["asset-relations"]
          );
          this.sourceAssets = jQuery.extend(
            true,
            [],
            data["_embedded"]["asset-relations"]
          );

          for (let assetRelation of this.sourceAssets) {
            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.sourceAssetOriginales = jQuery.extend(
            true,
            [],
            this.sourceAssets
          );

          if (this.targetAssets.length > 0) {
            this.initSourceAsset();
          } else {
            for (const assetRelation of this.sourceAssets) {
              this.assetRows = [];
              let assetRelationrow = {};
              assetRelationrow["identifier"] = assetRelation.identifier;
              assetRelationrow["description"] = assetRelation.description;
              assetRelationrow["targetAssetRelation"] = null;
              assetRelationrow["sourceAssetRelation"] = assetRelation;
              this.assetRows.push(assetRelationrow);
            }
          }
          this.refeshDnD();
        }
      },
      (error) => {
        console.log(error);
        this.targetAssets = null;
      }
    );

    var targetObservable = observableCombineLatest(
      this.selectedLocaleProductTarget
        .asObservable()
        .pipe(distinctUntilChanged()),
      this.selectedUiLocale.asObservable().pipe(distinctUntilChanged()),
      this.targetUri.asObservable(),

      function (selectedLocaleProductTarget, selectedUiLocale, uri) {
        let template = uriTemplates(uri);
        let uriParams = {};

        uriParams["context"] = "my-texter";
        uriParams["locale"] = selectedUiLocale;
        uriParams["data-locale"] = selectedLocaleProductTarget;

        return template.fill(uriParams);
      }
    ).pipe(
      takeUntil(this.unsubscribe),
      mergeMap((href) =>
        this._widgetframeService
          .getData(href)
          .pipe(onErrorResumeNext(this.resetWidget()))
      )
    );

    targetObservable.subscribe(
      (data) => {
        if (data["_embedded"] !== undefined) {
          this.assetRows = [];
          this.targetAssets = jQuery.extend(
            true,
            [],
            data["_embedded"]["asset-relations"]
          );
          this.assets = jQuery.extend(
            true,
            [],
            data["_embedded"]["asset-relations"]
          );

          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.sourceAssetOriginales.length > 0) {
            this.initSourceAsset();
          }

          this.changedAssets = [];
          this.changedAssetsOutput.next(this.changedAssets);
          this.refeshDnD();
        }
      },
      (error) => {
        console.log(error);
        this.targetAssets = null;
      }
    );
  }

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

    /*
    for (let assetRelationRow of this.assetRows) {
      let matchedAttribute = this.sourceAssets.filter(attribute => attribute.identifier === assetRelationRow["identifier"]);
      if ((assetRelationRow["sourceAssetRelation"] === null) && (assetRelationRow["targetAssetRelation"] === null)) {
        this.assetRows.splice(this.sourceAssets.indexOf(assetRelationRow), 1);
      }
    }

    */

    this._changeDetectorRef.markForCheck();
  }

  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: 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");

            console.log("start ", self.selectedAssets);
            self._dragAndDropService.registerDrag(
              "target-product-assets",
              jQuery.extend(true, [], self.selectedAssets)
            );
          },

          stop: function (e, ui) {
            let taegetAssetRelationIdentifier = jQuery(e.target).attr(
              "data-ari"
            );
            console.log(
              "stop taegetAssetRelationIdentifier",
              taegetAssetRelationIdentifier
            );

            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) {
              console.log("!dragged");
              return;
            }

            if (draggedAssets[0] === undefined) {
              console.log("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)
                );
                console.log("assets", assets);
                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();
  }

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

    /*
    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);
    }
*/
    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);
  }

  addAssetRelationToChangedAssets(assetRelation) {
    for (let index = 0; index < this.changedAssets.length; index++) {
      if (this.changedAssets[index].identifier === assetRelation.identifier) {
        this.changedAssets.splice(index, 1);
      }
    }
    this.changedAssets.push(assetRelation);
    let changedAssetsToTranfer = jQuery.extend(true, [], this.changedAssets);
    for (let assetRelation of changedAssetsToTranfer) {
      assetRelation["assets"] = [];
      assetRelation["assets"] = jQuery.extend(
        true,
        [],
        assetRelation["_embedded"]["assets"]
      );
      delete assetRelation["_embedded"];
    }

    this.clearAllSelections();
    this.changedAssetsOutput.next(changedAssetsToTranfer);
    this._changeDetectorRef.markForCheck();
  }

  resetWidget() {
    return null;
  }

  ngOnDestroy() {
    this.unsubscribe.destroy();
  }

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