import {Component, OnInit, TemplateRef, ViewChild, Inject} from '@angular/core';
import {DOCUMENT} from '@angular/common';
import {NavigationEnd, Router} from '@angular/router';
import {BsModalRef, BsModalService} from 'ngx-bootstrap';

import {ErrorHandler} from './core/error/ui/support/error-handler';
import {ErrorContext} from './core/error/ui/support/error-context';
import {environment} from '../environments/environment';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  providers: [
    {provide: ErrorHandler, useExisting: AppComponent},
    BsModalService
  ]
})
export class AppComponent implements OnInit, ErrorHandler {

  errors: any[];

  @ViewChild('errorsModalTemplate') errorTemplate: TemplateRef<any>;

  private modalRef: BsModalRef;

  private error: any;

  private errorContext: ErrorContext;

  constructor(@Inject(DOCUMENT) private doc: any,
    private router: Router,
    private modalService: BsModalService) {
    this.router.events.subscribe(event => {
      if (event instanceof NavigationEnd) {
        // (<any>window).ga('set', 'page', event.urlAfterRedirects);
        // (<any>window).ga('send', 'pageview');
      }
    });
  }

  ngOnInit() {
    this.setGoogleAnalytics();

    this.router.events.subscribe((evt) => {
      if (!(evt instanceof NavigationEnd)) {
        return;
      }
      window.scrollTo(0, 0);
    });
  }

  handleError(error, context): void {
    if (error) {
      this.error = error;
      this.errorContext = context;
      if (error.message) {
        this.errors = [error.message];
        console.log(this.errors);
      } else if (error instanceof Array) {
        this.errors = error;
      } else {
        this.errors = [error];
      }
    }
    this.modalRef = this.modalService.show(this.errorTemplate);
  }

  closeModal() {
    this.modalRef.hide();

    if (this.errorContext != null
      && this.errorContext.canContinue !== undefined
      && !this.errorContext.canContinue) {

        if (this.errorContext.recommendedRoute) {
          this.router.navigate(this.errorContext.recommendedRoute);
        } else {
          // hwo to resolve to home
          this.router.navigate(['/company']);
        }
    }
    this.errors = [];
    this.error = null;
    this.errorContext = null;
    this.modalRef = null;
  }

  private setGoogleAnalytics() {

    this.doc.write(`<script async src="https://www.googletagmanager.com/gtag/js?id=${environment.googleAnalyticsTrackingId}"></script>`);

    const s = this.doc.createElement('script');
    s.type = 'text/javascript';
    s.innerHTML = `<!-- Google Analytics -->
                  window.dataLayer = window.dataLayer || [];
                  function gtag(){dataLayer.push(arguments);}
                  gtag('js', new Date());
                  gtag('config', '${environment.googleAnalyticsTrackingId}');`;
    const head = this.doc.getElementsByTagName('head')[0];
    head.appendChild(s);
  }

}

<ng-progress [spinner]="false" color="#5ABBA2" [thick]="true"></ng-progress>
<router-outlet></router-outlet>
<!-- Errors Modal Template -->
<ng-template #errorsModalTemplate>
  <div class="modal-header">
    <h4 class="modal-title text-danger"><i class="fa fa-exclamation-triangle"></i> Errors</h4>
    <button type="button" class="close" (click)="closeModal()" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="modal-body">
    <div class="row">
      <p class="pb-3 text-blue-grey" *ngFor="let error of errors">{{ error }}</p>
    </div>
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-danger text-white" (click)="closeModal()">OK</button>
  </div>
</ng-template>