import { Injectable } from "@angular/core";
import { CommonService } from "../common/common.service";
import {
  Router,
  RouteConfigLoadStart,
  RouteConfigLoadEnd
} from "@angular/router";
import { Route } from "@angular/compiler/src/core";
import { TranslatorService } from "../translator/translator.service";

@Injectable({
  providedIn: "root"
})
export class LazyLoadingService {
  private static id = "splash-screen-custom";

  private modulesCount = 5;
  private loadedModulesCount = 0;
  private isPresented = false;
  constructor(public ts: TranslatorService, public router: Router) {
    this.startSplashScreen();
  }

  monitorLazyLoading(modulesCount: number, debug = false) {
    this.modulesCount = modulesCount;
    this.loadedModulesCount = 0;
    this.router.events.subscribe(event => {
      if (event instanceof RouteConfigLoadStart) {
        //console.log('start:' + event.route.path);
        this.startSplashScreen();
      } else if (event instanceof RouteConfigLoadEnd) {
        //console.log('end:' + event.route.path);
        if (++this.loadedModulesCount >= this.modulesCount) {
          this.dismiss();
        }

        if ( debug ) {
          console.log('module:' + event.route.path + ' lazy modules:' + this.loadedModulesCount);
        }
      }
    });
  }

  public startSplashScreen() {
    if (!this.isPresented) {
      this.isPresented = true;
      document.body.appendChild(this.createSplashScreen());
      this.disableEventsPropagation();
    }
  }

  private disableEventsPropagation() {
    const view = document.getElementById(LazyLoadingService.id);

    view.addEventListener("click", e => {
      e.stopImmediatePropagation();
    });
  }

  public dismiss() {
    // this.isPresented = false;
    const element = document.getElementById(LazyLoadingService.id);
    if (element) {
      element.remove();
    }
  }

  private innerTemplate(message: string): string {
    return " <div class='splash' ></div> " + " <p>" + message + "</p>";
  }
  private createSplashScreen() {
    const elemDiv = document.createElement("div");
    elemDiv.id = LazyLoadingService.id;
    elemDiv.className = "splash-screen-page";
    //elemDiv.innerHTML = this.innerTemplate(this.ts.trPK('general', 'loading'));
    return elemDiv;
  }
}
