import { Component, OnInit, Inject } from '@angular/core';
import { filter, map, tap } from 'rxjs/operators';
import { Observable } from 'rxjs';
import { SessionStore, StorageService } from '../../providers';
import { ActivatedRoute, ParamMap } from '@angular/router';

declare var window: any;
const CYPRESS_KEY = 'cypress';

@Component({
  selector: 'app-main-title',
  templateUrl: './app-main-title.component.html',
  styleUrls: ['./app-main-title.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 AppMainTitleComponent implements OnInit {
  domain$: Observable<string>;
  route$: Observable<ParamMap>;
  isInIFrame = false;
  mainHeader: string;

  constructor(private sessionStore: SessionStore, private storageService: StorageService, private route: ActivatedRoute) { }

  ngOnInit(): void {
    this.route$ = this.route.queryParamMap.pipe(
      tap((queryParams) => {
        const toBeSaved = queryParams.get(CYPRESS_KEY) ? true : false;
        if (toBeSaved) {
          this.storageService.set(CYPRESS_KEY, toBeSaved);
        }
        const cypressActive = this.storageService.get(CYPRESS_KEY);
        console.log('cypressActive', cypressActive);

        this.isInIFrame = cypressActive ? false : window.top !== window.self;
      })
    );

    this.domain$ = this.sessionStore.session$.pipe(
      filter(session => !!session && !!session.domain),
      map(session => session.domain.toLowerCase()),
      map(domain => {
        this.setMainHeader(domain);
        return domain;
      })
    );
  }

  setMainHeader(domain) {
    switch (domain) {
      case 'seattlebank':
        this.mainHeader = 'External Transfers';
        break;
      case 'swfinancial':
        this.mainHeader = 'External Transfers';
        break;
      default:
        this.mainHeader = 'Transfer Money';
    }
  }
}