import 'rxjs/add/operator/filter';

import { Component, OnInit, ViewEncapsulation, Renderer2 } from '@angular/core';
import { DomSanitizer, SafeUrl } from '@angular/platform-browser';
import { Router } from '@angular/router';

import { ErrorStore } from './providers/stores/error.store';
import { SessionStore } from './providers/stores/session.store';
import { PlaidService } from './providers/services/plaid.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  encapsulation: ViewEncapsulation.None,
})
export class AppComponent implements OnInit {
  styleUrl: SafeUrl;
  hidePlaid = true;

  constructor(
    private errorService: ErrorStore,
    private sessionStore: SessionStore,
    private router: Router,
    private sanitizer: DomSanitizer,
    private renderer: Renderer2,
    private plaidService: PlaidService
  ) {}

  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 () => {
      // leave arrow fn  () => to ensure this context is correct
      this.errorService.showError('Session Timed Out', 'Redirecting....');
      setTimeout(() => {
        this.router.navigate(['/logout']);
      }, 1000);
    };
  }
}