import { Component, OnInit } from '@angular/core';
import { Title } from '@angular/platform-browser';
import {
  MultiFactorService,
  PaymentService,
  SessionStore,
  TemplateService,
} from '../../providers';
import { LoaderStore } from '../loader/loader.store';
import { Router } from '@angular/router';
import { GET_PAYMENTS_BY, ORDER_BYS, ORDER_BY_DIRECTIONS } from '../../app.constants';
import { Observable, pipe } from 'rxjs';
import { filter, first, map, switchMap, tap } from 'rxjs/operators';
import { DeliveryDateService } from '../../providers/services/delivery-date.service';

@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 {
  showNoExternalAccounts = false;

  constructor(
    private titleService: Title,
    private loader: LoaderStore,
    private paymentService: PaymentService,
    private sessionStore: SessionStore,
    private templateService: TemplateService,
    private deliveryDateService: DeliveryDateService,
    private router: Router
  ) {}

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

  setupSession() {
    this.sessionStore.session$.pipe(
      filter((session) => session !== null),
      filter((session) => session !== undefined),
      filter((session) => session.domain !== null),
      filter((session) => session.domain !== undefined),
      first()
    )
      .subscribe((session) => {
        this.cacheData(session);
        this.loader.hide();
      });
  }

  hideNoExternalAccount() {
    this.showNoExternalAccounts = false;
  }

  navigateToAddAnAccount() {
    this.showNoExternalAccounts = false;
    this.router.navigate(['/template/plaid']);
  }

  cacheData(session) {
    console.log('starting caching data');
    this.templateService.loadTemplates().subscribe((hasExternalAccounts) => {
      if (hasExternalAccounts) {
        console.log('prefetch templates complete and user has external accounts');
      } else {
        this.showNoExternalAccounts = true;
      }
    });
      this.deliveryDateService.loadDeliveryDate(session.domain)
      .subscribe((date) =>
        console.log(date)
      );
  }
}