import { Component, OnInit, ViewEncapsulation } from '@angular/core';
import { DomSanitizer, SafeUrl } from '@angular/platform-browser';
import { Router } from '@angular/router';
import 'rxjs/add/operator/filter';
import { ErrorStore, SessionStore } from './stores';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  encapsulation: ViewEncapsulation.None,
})
export class AppComponent implements OnInit {
  styleUrl: SafeUrl;
  constructor(
    private errorService: ErrorStore,
    private sessionStore: SessionStore,
    private router: Router,
    private sanitizer: DomSanitizer
  ) {}

  ngOnInit(): void {
    this.sessionStore.session$
      .filter((session) => session !== null)
      .filter((session) => session !== undefined)
      .filter((session) => session.styleUrl !== null)
      .filter((session) => session.styleUrl !== undefined)
      .filter((session) => session.styleUrl.length > 0)
      .subscribe((session) => {
        this.styleUrl = this.sanitizer.bypassSecurityTrustResourceUrl(session.styleUrl);
      });
    this.sessionStore.init();
  }

  get onTimeout() {
    return () => {
      console.log('on timeout delegate');
      // leave arrow fn  () => to ensure this context is correct
      this.errorService.addError('Session Timed Out', 'Redirecting....');
      this.errorService.displayErrors();
      setTimeout(() => {
        this.router.navigate(['/logout']);
      }, 1000);
    };
  }
}