import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { PaymentService, TemplateService } from '../../../providers';
import { AppStateStore } from '../../../providers/stores/app-state.store';
import { PaymentCreateVm } from './payment-create.vm';

@Component({
  selector: 'app-payment-create',
  templateUrl: './payment-create.component.html',
  styleUrls: ['./payment-create.component.css']
})
export class PaymentCreateComponent implements OnInit {
  model = new PaymentCreateVm();
  constructor(
    private paymentService: PaymentService,
    private templateService: TemplateService,
    private app: AppStateStore,
    private router: Router
  ) {}

  ngOnInit() {
    if (!this.app.amount) {
      this.router.navigate(['/start']);
    }
    return this.submitPayment();
  }

  submitPayment() {
    console.log('submit payment started');
    this.paymentService
      .createPayment(
        this.app.amount,
        this.app.memo,
        this.app.debitTemplate,
        this.app.creditTemplate
      )
      .subscribe(payment => {
        if (!payment) {
          return console.log('Failed to create payment!');
        }
        this.templateService
          .loadTemplates()
          .subscribe(() => console.log('Templates refreshed'));
        this.app.hasPassedMfa = false;
        this.app.payment = payment;
        this.router.navigate(['/success-screen']);
      });
  }
}