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

declare var window: any;

@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>;
  isInIFrame = false;
  init$: Observable<any>;

  constructor(
    private sessionStore: SessionStore,
    private storageService: StorageService,
    private route: ActivatedRoute
  ) {}
  ngOnInit(): void {
    const CYPRESS_KEY = 'cypress';

    this.init$ = 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) => {
            return domain;
          })
        );
      })
    );
  }
}