import { Injectable, NgZone, OnDestroy } from "@angular/core";
import { fromEvent, Subscription } from "rxjs";
import { IgxGridBaseDirective } from "@infragistics/igniteui-angular";

interface GridSubscription {
  element: Element;
  subscription: Subscription;
}

@Injectable()
export class DataListEndEditService implements OnDestroy {
  private subscription: Subscription;
  private grids = new Map<IgxGridBaseDirective, GridSubscription[]>();

  constructor(private ngZone: NgZone) {
    this.subscribe("body", false, (el, sub) => (this.subscription = sub));
  }

  private subscribe(
    query: string,
    isInDialog: boolean,
    callback: (element: Element, subscription: Subscription) => void
  ) {
    let element = document.querySelector(query);

    if (element == null) {
      return;
    }

    this.ngZone.runOutsideAngular(() => {
      let subscription = fromEvent(element, "pointerdown").subscribe(
        (event) => {
          this.onPointerDown(event, isInDialog);
        }
      );

      callback(element, subscription);
    });
  }

  private onPointerDown(event: any, isInDialog: boolean) {
    if (this.grids.size === 0) {
      return;
    }

    const grids = new Map<IgxGridBaseDirective, GridSubscription[]>(this.grids);
    const remove = new Set<IgxGridBaseDirective>();

    grids.forEach((subscriptions, grid) => {
      if (grid.crudService.cell == null) {
        remove.add(grid);
        return;
      }

      const target = event.target ? event.target.tagName.toLowerCase() : "";
      if (target === "igx-grid-cell") {
        return;
      }

      // prevent catching mouse events, that are target at overlay containers
      // in case of dropdowns
      let path: HTMLElement[];
      if (event.path) {
        path = event.path;
      } else if (event.composedPath) {
        path = event.composedPath();
      } else {
        path = this.composedPath(event.target);
      }

      for (let el of path) {
        // we need to check, if the "mat-dialog-container" either
        // 1) the dialog container, which actually contains the edited grid
        // 2) OR, just a dialog container that has been opened for external editing
        //
        // only for (1) do we want to actually commit the changes
        if (
          el.tagName === "MAT-DIALOG-CONTAINER" &&
          subscriptions.find((sub) => sub.element === el)
        ) {
          break;
        }

        // we need to ignore clicks inside the "tiny-text-editor"
        if (el.classList && el.classList.contains("tox")) {
          return;
        }

        // we hit the overlay before the dialog?
        // then this is possibly a combo box and we don't want to impede the editing
        if (
          el.classList &&
          (el.classList.contains("igx-display-container") ||
            el.classList.contains("cdk-overlay-container"))
        ) {
          return;
        }
      }

      grid.endEdit();
      grid.cdr.detectChanges();

      // grid is not editing anymore and can be removed
      remove.add(grid);
    });

    if (remove.size > 0) {
      remove.forEach((grid) => {
        let subscriptions = this.grids.get(grid);
        if (subscriptions) {
          subscriptions.forEach((sub) => sub.subscription.unsubscribe());
        }

        this.grids.delete(grid);
      });
    }
  }

  // IE has neither event.path nor event.composedPath so here we go doing it ourselves..
  private composedPath(el): HTMLElement[] {
    var path = [];

    while (el) {
      path.push(el);

      if (el.tagName === "HTML") {
        path.push(document);
        path.push(window);

        return path;
      }

      el = el.parentElement;
    }
    return path;
  }

  public beginEdit(grid: IgxGridBaseDirective) {
    let subscriptions = [];
    this.grids.set(grid, subscriptions);

    //this.subscribe("div.cdk-overlay-backdrop", true, sub => subscriptions.push(sub));
    //this.subscribe("div.cdk-overlay-pane", true,sub => subscriptions.push(sub));
    this.subscribe("mat-dialog-container", true, (element, subscription) =>
      subscriptions.push({ element, subscription })
    );
  }

  ngOnDestroy(): void {
    if (this.subscription) {
      this.subscription.unsubscribe();
    }
  }
}