import { Observable } from 'rxjs/Observable';
import { Component, OnInit } from '@angular/core';
import { TemplateService, PaymentService, MultiFactorService } from '../services';
import { SessionStore, LoaderStore, ErrorStore } from '../stores';
import { Title } from '@angular/platform-browser';
import { DeliveryDateService } from '../services/delivery-date.service';
import { tap } from 'rxjs/operators';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css'],
})
// TODO "Return to BillPay" button needs to behave differently based on how the app is consumed.
// If stand-alone the link should be "log out" which will logout the user and cause a redirect to the login
// If embedded inside an iframe then the
export class HomeComponent implements OnInit {
  payments$: Observable<any>;
  mfa$: Observable<any>;
  constructor(
    private titleService: Title,
    private loader: LoaderStore,
    private multiFactorService: MultiFactorService,
    private paymentService: PaymentService,
    private sessionStore: SessionStore,
    private templateService: TemplateService,
    private deliveryDateService: DeliveryDateService
  ) {}

  ngOnInit(): void {
    this.titleService.setTitle('Pay A Person');
    this.loader.show();
    this.setupSession();
  }

  setupSession() {
    this.sessionStore.session$
      .filter((session) => session !== null)
      .filter((session) => session !== undefined)
      .filter((session) => session.domain !== null)
      .filter((session) => session.domain !== undefined)
      .subscribe((session) => {
        this.cacheData();
        this.loader.hide();
        this.deliveryDateService.loadDeliveryDate(session.domain).subscribe((date) => console.log(date));
      });
  }

  cacheData() {
    this.payments$ = this.paymentService
      .getPayments(false)
      .pipe(
        tap((wasSuccess) =>
          wasSuccess ? console.log('prefetch payments complete') : console.log('prefetch payments failed')
        )
      );

    this.mfa$ = this.multiFactorService.getMethods().pipe(
      tap((model) => {
        console.log('prefetch multifactor details complete');
      })
    );
  }
}