import { Component, EventEmitter, OnInit, Output } from '@angular/core';
import { Router } from '@angular/router';
import { MultiFactorModel, SelectedMultiFactorMethod } from '../models';
import { MultiFactorService } from '../services';
import { ErrorStore } from '../stores';
import { AppState } from '../stores/app-state.store';

@Component({
  selector: 'app-authenticate-method',
  templateUrl: './authenticate-method.component.html',
  styleUrls: ['./authenticate-method.component.css'],
})
export class AuthenticateMethodComponent implements OnInit {
  @Output()
  closeAuthMethod = new EventEmitter();
  @Output()
  openAuthInput = new EventEmitter();
  isLoading = false;
  model: MultiFactorModel;
  loadingHeader = 'Retrieving Data';
  loadingMessage = 'Please wait a moment while we retrieve your information.';
  constructor(
    public app: AppState,
    private multiFactorService: MultiFactorService,
    private router: Router,
    private errorService: ErrorStore
  ) {}

  modelIsDefined() {
    return this.model !== null && this.model !== undefined;
  }

  ngOnInit() {
    this.isLoading = true;

    this.multiFactorService.getMethods().subscribe((model) => {
      // When model isn't cached on app load *ngIf to toggle view doesn't fire correctly.
      // Todo determine why and fix. Otherwise leave workaround (preload data in app component)
      this.app.multiFactorModel = model;
      this.model = model;
      if (model === null || model === undefined || !model.isValid) {
        this.errorService.addError(
          'You are missing the necessary contact information to use this feature.',
          'Please contact your financial institution.'
        );
        this.errorService.displayErrors();
      }
      if (!model.allowsEmailMfa && (!model.phoneNumbers || model.phoneNumbers.length === 0)) {
        this.errorService.addError(
          'You are missing a Phone Number to use this feature.',
          'Please contact your financial institution.'
        );
        this.errorService.displayErrors();
      }
      this.isLoading = false;
    });
  }

  select(method: string, target: string) {
    this.loadingHeader = 'Sending Code';
    this.loadingMessage = 'Please wait a moment while we are sending a code to you.';
    this.isLoading = true;
    this.multiFactorService.requestCode(method, target).subscribe((wasSent) => {
      if (!wasSent) {
        this.errorService.addError(
          'Error',
          'An unexpected error occurred. Please try again. Otherwise, please contact your financial insitution.'
        );
        return this.errorService.displayErrors();
      }

      this.app.selectedMethod = new SelectedMultiFactorMethod(method, target);
      this.isLoading = false;

      if (!this.app.useMfaModal) {
        this.router.navigate(['/authenticate-input']);
      } else {
        this.toggleAuthInput(event);
      }
    });
  }

  toggleAuthMethod(event: Event) {
    this.closeAuthMethod.emit();
    this.app.useMfaModal = false;
  }

  toggleAuthInput(event: Event) {
    this.closeAuthMethod.emit();
    this.openAuthInput.emit();
  }

  stopPropagation(event: Event) {
    event.stopPropagation();
  }
}