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

import {
  onErrorResumeNext,
  takeUntil,
  distinctUntilChanged,
  mergeMap,
} from "rxjs/operators";
import {
  ChangeDetectionStrategy,
  ChangeDetectorRef,
  Component,
  OnDestroy,
} from "@angular/core";
import * as uriTemplates_ from "uri-templates";
import { Attribute } from "../../../../components/edit-attribute/attribute";
import { EditAttributeService } from "../../../../components/edit-attribute/edit-attribute.service";
import { HalService } from "../../../../components/hal/index";
import { NgUnsubscribe } from "../../../../ng-unsubscribe";
import { CustomNotificationService } from "../../../../components/notification/customnotification.service";
import { WidgetConfig } from "../../../widget.configuration";
import {
  WidgetComponent,
  WidgetConfiguration,
  WidgetConfigure,
  WidgetId,
  WidgetInput,
  WidgetOutput,
} from "../../../widget.metadata";
import { WidgetframeService } from "../../../widgetframe/widgetframe.service";

const uriTemplates = uriTemplates_;
declare var jQuery: any;

@WidgetComponent("nm-copy-product-attributes")
@Component({
  selector: "nm-copy-product-attributes",
  templateUrl: "./copy-product-attributes.component.html",
  styleUrls: ["./copy-product-attributes.component.scss"],
  providers: [EditAttributeService],
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class CopyProductAttributesWidgetComponent implements OnDestroy {
  sourceNeedsInit: boolean;
  public cols: any[];

  public sourceAttributes: Attribute[] = [];
  public sourceAttributesOriginales: Attribute[] = [];
  public targetAttributes: Attribute[] = [];
  public attributeRows: any[] = [];
  public changedAttributes: Attribute[] = [];

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

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

  @WidgetId()
  public _id: string;

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

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

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

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

  constructor(
    public _widgetframeService: WidgetframeService,
    public _sourceAttributeService: EditAttributeService,
    public _targetAttributeService: EditAttributeService,
    public _halService: HalService,
    public _notificationService: CustomNotificationService,
    public _changeDetectorRef: ChangeDetectorRef
  ) {}

  @WidgetConfigure()
  protected configureWidget(configuration: WidgetConfig) {
    this.changedAttributes = [];
    // let href = configuration._links["targetAttributes"]["href"];
    this.editLayout = configuration.configuration["edit-layout"];
    // let template = uriTemplates(href);
    this.productNoForEdit.subscribe((data) => (this.productNo = data));

    this.selectedLocaleProductSource.subscribe((data) => {
      this.changedAttributesOutput.next([]);
      this.selectedDataLocaleString = data;
    });

    this.clearChangedAttributes
      .pipe(takeUntil(this.unsubscribe))
      .subscribe((clearChangedAttributes) => {
        this.changedAttributes = [];
        this.changedAttributesOutput.next(this.changedAttributes);
      });

    this.resetWidgets.pipe(takeUntil(this.unsubscribe)).subscribe((data) => {
      this.targetAttributes = [];
      this.changedAttributes = [];
      this.changedAttributesOutput.next(null);
      this.targetUri.next(" ");
      this.sourceUri.next(" ");
    });

    this.resetSourceAttributes
      .pipe(takeUntil(this.unsubscribe))
      .subscribe((data) => {
        this.sourceAttributes = [];
        this.sourceAttributesOriginales = [];
        this.sourceUri.next(" ");
        let targetAttributeStillThere = false;

        for (let attributeRow of this.attributeRows) {
          attributeRow["sourceAttribute"] = null;

          if (attributeRow["sourceAttribute"] != null) {
            targetAttributeStillThere = true;
          }
        }

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

        this._changeDetectorRef.markForCheck();
      });

    this.resetTargetAttributes.subscribe((data) => {
      this.targetAttributes = [];
      this.changedAttributes = [];
      this.targetUri.next(" ");
      let sourceAttributeStillThere = false;

      for (let attributeRow of this.attributeRows) {
        attributeRow["targetAttribute"] = null;

        if (attributeRow["sourceAttribute"] != null) {
          sourceAttributeStillThere = true;
        }
      }

      if (!sourceAttributeStillThere) {
        this.attributeRows = [];
      }
      this._changeDetectorRef.markForCheck();
    });

    this._sourceAttributeService
      .getCopyAttributeEvent()
      .subscribe((attribute) => {
        let targetAttributes = this.targetAttributes.filter(
          (item) => item.identifier == attribute.identifier
        );
        if (targetAttributes.length > 0) {
          targetAttributes[0].source = jQuery.extend(
            true,
            [],
            attribute.source
          );
          if (targetAttributes[0].type === "META") {
            if (attribute._embedded && attribute._embedded.attributes) {
              targetAttributes[0]._embedded = jQuery.extend(
                true,
                [],
                attribute._embedded
              );

              for (let targetMetaAttribute of targetAttributes[0]._embedded
                .attributes) {
                targetMetaAttribute["read-only"] = false;
              }
              /* TODO Improve Meta Attribute handling 
              for (let targetMetaAttribute of targetAttributes[0]._embedded.attributes) {  
                  console.log("targetMetaAttribute", targetMetaAttribute);              
                  let sourceMetaAttribute = attribute._embedded.attributes.filter(item => item.identifier == targetMetaAttribute.identifier);
                  
                  if (sourceMetaAttribute.length > 0) {

                    console.log("sourceMetaAttribute", sourceMetaAttribute);    
                    targetMetaAttribute = jQuery.extend(true, [], sourceMetaAttribute[0]);
                  }
                }*/
            }
          }
          console.log(" targetAttributes[0]", targetAttributes[0]);

          this._targetAttributeService.setTriggerSourceRefreshEvent(
            targetAttributes[0]
          );
        }
        this._changeDetectorRef.markForCheck();
      });

    this._targetAttributeService
      .getAttributeChangedEvent()
      .subscribe((attribute) => {
        let valid = true;
        let dublicate = this.changedAttributes.filter(
          (item) => item.identifier == attribute.identifier
        );

        if (dublicate.length === 1) {
          dublicate[0].source = attribute.source;
        } else {
          this.changedAttributes.push(attribute);
        }
        this.changedAttributesOutput.next(this.changedAttributes);
        //this._changeDetectorRef.markForCheck();
      });

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

      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) => {
        this.sourceAttributes = [];
        this.sourceAttributes = jQuery.extend(true, [], data["values"]);
        this.sourceAttributesOriginales = [];
        this.sourceAttributesOriginales = jQuery.extend(
          true,
          [],
          data["values"]
        );

        if (this.targetAttributes.length > 0) {
          this.initSourceAttributes();
        } else {
          this.attributeRows = [];

          for (const attribute of this.sourceAttributes) {
            let attributerow = {};
            attributerow["identifier"] = attribute.identifier;
            attributerow["description"] = attribute.description;
            attributerow["targetAttribute"] = null;
            attributerow["sourceAttribute"] = attribute;
            this.attributeRows.push(attributerow);
          }
        }
        this._changeDetectorRef.markForCheck();
      },
      (error) => {
        this.sourceAttributes = [];
        this.sourceAttributesOriginales = [];
        this._changeDetectorRef.markForCheck();
      }
    );

    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) => {
        this.targetAttributes = [];
        this.attributeRows = [];
        this.targetAttributes = jQuery.extend(true, [], data["values"]);

        jQuery(".nm-button__scrollToTop").css("opacity", 1);

        for (const attribute of this.targetAttributes) {
          let attributerow = {};
          attributerow["identifier"] = attribute.identifier;
          attributerow["description"] = attribute.description;
          attributerow["targetAttribute"] = attribute;
          attributerow["sourceAttribute"] = null;
          this.attributeRows.push(attributerow);
        }

        if (this.sourceAttributesOriginales.length > 0) {
          this.initSourceAttributes();
        }

        this.changedAttributes = [];
        this.changedAttributesOutput.next(this.changedAttributes);
        this.boxWidth = this.setBoxWidth(this.targetAttributes.length);
        this._changeDetectorRef.markForCheck();
      },
      (error) => {
        this.targetAttributes = null;
      }
    );
  }

  private initSourceAttributes() {
    this.sourceAttributes = [];
    this.sourceAttributes = jQuery.extend(
      true,
      [],
      this.sourceAttributesOriginales
    );

    for (let attributrow of this.attributeRows) {
      let matchedAttribute = this.sourceAttributes.filter(
        (attribute) => attribute.identifier === attributrow["identifier"]
      );
      if (matchedAttribute.length > 0) {
        attributrow["sourceAttribute"] = jQuery.extend(
          true,
          {},
          matchedAttribute[0]
        );
        this.sourceAttributes.splice(
          this.sourceAttributes.indexOf(matchedAttribute[0]),
          1
        );
      }
    }
    for (const attribute of this.sourceAttributes) {
      let attributerow = {};
      attributerow["identifier"] = attribute.identifier;
      attributerow["description"] = attribute.description;
      attributerow["targetAttribute"] = null;
      attributerow["sourceAttribute"] = attribute;
      this.attributeRows.push(attributerow);
    }

    for (let attributrow of this.attributeRows) {
      let matchedAttribute = this.sourceAttributes.filter(
        (attribute) => attribute.identifier === attributrow["identifier"]
      );
      if (
        attributrow["sourceAttribute"] === null &&
        attributrow["targetAttribute"] === null
      ) {
        this.attributeRows.splice(
          this.sourceAttributes.indexOf(attributrow),
          1
        );
      }
    }
    this._changeDetectorRef.markForCheck();
  }

  resetWidget() {
    return null;
  }

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

  setBoxWidth(index) {
    return 98 / index + "%";
  }

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