import { Component, ApplicationRef, OnInit, OnDestroy } from '@angular/core';
//import { MdDialog } from '@angular/material';
import { Router } from '@angular/router';

import { environment } from '../environments/environment';
import { InternationalisationService, Language, LanguageCode } from './services/internationalisation/internationalisation.service';
import { Observer } from './services/observer';
import { ErrorService } from './services/error/error.service';
// import { AlertDialog } from './components/alert-dialog/alert-dialog.component';
import { FormulaireService } from './services/formulaire/formulaire.service';
import { FormulaireDefinition } from './formulaire/formulaire-definition';


@Component({
  selector: 'nghyd-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit, OnDestroy, Observer {
  private _displayErrorDialog: boolean = false;

  private _calculators: any[] = [];

  /**
   * id du formulaire courant
   * on utilise pas directement FormulaireService.currentFormId pour éviter l'erreur ExpressionChangedAfterItHasBeenCheckedError
   */
  private _currentFormId: number;

  // constructor(private intlService: InternationalisationService, private appRef: ApplicationRef, private dialog: MdDialog, private errorService: ErrorService) { }
  constructor(private intlService: InternationalisationService,
    private appRef: ApplicationRef,
    private errorService: ErrorService,
    private router: Router,
    private formulaireService: FormulaireService
  ) {
  }

  // process.on('unhandledRejection', (reason, p) => {
  //   console.log('Unhandled Rejection at: Promise', p, 'reason:', reason);
  //   // Stack Trace
  //   console.log(reason.stack);
  // });

  ngOnInit() {
    this.intlService.addObserver(this);
    this.intlService.setLocale("fr");
    this.formulaireService.addObserver(this);
    this.subscribeErrorService();
  }

  ngOnDestroy() {
    this.unsubscribeErrorService();
    this.formulaireService.removeObserver(this);
  }

  private get uitextSidenavNewCalc() {
    return this.intlService.localizeText("INFO_MENU_NOUVELLE_CALC");
  }

  private get uitextSidenavParams() {
    return this.intlService.localizeText("INFO_SETUP_TITLE");
  }

  /**
   * abonnement au service d'erreurs
   */
  private subscribeErrorService() {
    this.errorService.addObserver(this);
  }

  private unsubscribeErrorService() {
    this.errorService.removeObserver(this);
  }

  private updateLocale() {
    let tag = this.intlService.currentLanguage.tag;
    document['locale'] = tag;

    // location.reload(true);
    // this.cdRef.markForCheck();
    // this.cdRef.detectChanges();
    this.appRef.tick();
  }

  // interface Observer

  update(sender: any, data: any): void {
    if (sender instanceof ErrorService) {
      // on ouvre un dialogue avec le message d'erreur reçu
      // if (this._displayErrorDialog) {
      //   let dialogRef = this.dialog.open(AlertDialog);
      //   let ad: AlertDialog = dialogRef.componentInstance;
      //   ad.text = String(data);
      // }
      // else
      console.log(data);
    }
    else if (sender instanceof FormulaireService) {
      switch (data["action"]) {
        case "createForm":
          const f: FormulaireDefinition = data["form"];
          this._calculators.push(
            {
              "title": f.calculatorName,
              "uid": String(f.uid)
            }
          );

          // abonnement en tant qu'observateur du nouveau formulaire
          f.addObserver(this);
          break;

        case "invalidFormId":
          this.toList();
          break;

        case "currentFormChanged":
          /*
           utilisation de setTimeout() pour éviter le message console ExpressionChangedAfterItHasBeenCheckedError
           relatif au getter getHighlightClass() (qui change de valeur quand le formulaire courant change)
           */
          setTimeout(() => {
            this._currentFormId = data["formId"];
          }, 1);
          break;

        case "closeForm":
          const form: FormulaireDefinition = data["form"];
          this.closeCalculator(form);
          break;
      }
    }
    else if (sender instanceof InternationalisationService) {
      this.updateLocale();
    }
    else if (sender instanceof FormulaireDefinition) {
      switch (data["action"]) {
        case "nameChanged":
          this.updateCalculatorTitle(sender, data["name"]);
          break;
      }
    }
  }

  private getCalculatorIndexFromId(formId: number) {
    const index = this._calculators.reduce((resultIndex, calc, currIndex) => {
      if (resultIndex == -1 && calc["uid"] == formId)
        resultIndex = currIndex;
      return resultIndex;
    }, -1);

    return index;
  }

  private updateCalculatorTitle(f: FormulaireDefinition, title: string) {
    const formIndex = this.getCalculatorIndexFromId(f.uid);
    this._calculators[formIndex]["title"] = title;
  }

  private closeCalculator(form: FormulaireDefinition) {
    const formId: number = form.uid;

    // désabonnement en tant qu'observateur

    form.removeObserver(this);

    // recherche de la calculette correspondante à formId

    const closedIndex = this.getCalculatorIndexFromId(formId);

    /*
     * détermination de la nouvelle calculette à afficher : 
     * - celle après celle supprimée
     * - ou celle avant celle supprimée si on supprime la dernière
     */

    let newId: number = -1;
    const l = this._calculators.length;
    if (l > 1) {
      if (closedIndex == l - 1)
        newId = +this._calculators[closedIndex - 1]["uid"];
      else
        newId = +this._calculators[closedIndex + 1]["uid"];
    }

    // suppression

    this._calculators = this._calculators.filter(calc => {
      return formId != +calc["uid"]
    });

    // MAJ affichage

    if (newId == -1) {
      this.toList();
      this._currentFormId = -1;
    }
    else
      this.toCalc(newId);
  }

  private toList() {
    this.router.navigate(['/list']);
  }

  private toCalc(id: number) {
    this.router.navigate(['/calculator', id]);
  }

  private getHighlightClass(uid: number) {
    return uid == this._currentFormId ? "blue darken-2" : "";
  }

  // flag d'affichage des repères des colonnes Bootstrap : uniquement en mode dev
  // cf. src/environments/*, ng build --env=<mode> (par ex : ng build --env=prod)
  private get ruler(): boolean {
    // return !environment.production;
    return false;
  }

  // sidenav

  private openNav() {
    document.getElementById("mySidenav").style.width = "300px";
  }

  private closeNav() {
    document.getElementById("mySidenav").style.width = "0";
  }

  private newCalc() {
    this.closeNav();
    this.toList();
  }

  private params() {
    this.closeNav();
    this.router.navigate(['/setup']);
  }

  // sidenav
}