import { Component, ElementRef, EventEmitter, OnInit, Output, ViewChild } from '@angular/core';
import { Router } from '@angular/router';
import { debounceTime, filter, map } from 'rxjs/operators';
import { AppState } from '../../stores/app-state.store';

@Component({
  selector: 'app-paying-again',
  templateUrl: './paying-again.component.html',
  styleUrls: ['./paying-again.component.css']
})
export class PayingAgainComponent implements OnInit {
  @ViewChild('userFormPayAgain')
  payagainform;
  @ViewChild('memoInput')
  memoinput: ElementRef;
  @Output()
  isSubmitPayment = new EventEmitter();
  memo = '';
  isValid = false;

  constructor(public app: AppState, private router: Router) {}

  ngOnInit() {
    this.app.state$
      .pipe(
        debounceTime(500),
        filter(state => state !== null && state !== undefined),
        map(state => state.isValid)
      )
      .subscribe(isValid => {
        this.isValid = isValid;
      });
  }

  submit() {
    this.app.payment.memo = this.memo;
    if (!this.app.hasPassedMfa) {
      this.router.navigate(['/payment/create']);
    } else {
      if (this.isValid) {
        this.submitPayment();
      }
    }
  }

  submitPayment() {
    this.isSubmitPayment.emit();
  }

  resetPayAgainForm() {
    this.payagainform.reset();
  }
}