import {Component, OnInit, EventEmitter, Output, Input} from '@angular/core';
import {FormBuilder, FormGroup, Validators} from '@angular/forms';
import {CustomErrorStateMatcher} from '@app/_helpers';
import {TransactionService} from '@app/_services';
import {first} from 'rxjs/operators';

@Component({
  selector: 'app-disbursement',
  templateUrl: './disbursement.component.html',
  styleUrls: ['./disbursement.component.scss']
})
export class DisbursementComponent implements OnInit {
  @Input() account;
  @Output() cancelDisbursmentEvent = new EventEmitter();
  disbursementForm: FormGroup;
  matcher = new CustomErrorStateMatcher();
  submitted: boolean = false;

  constructor(
    private formBuilder: FormBuilder,
    private transactionService: TransactionService
  ) { }

  ngOnInit(): void {
    this.disbursementForm = this.formBuilder.group({
      transactionType: ['', Validators.required],
      recipient: '',
      amount: ['', Validators.required]
    });
  }

  get disbursementFormStub(): any { return this.disbursementForm.controls; }

  createTransfer(): void {
    this.submitted = true;
    if (this.disbursementForm.invalid) { return; }
    if (this.disbursementFormStub.transactionType.value === 'transfer') {
      this.transactionService.transferRequest(
        this.account.token,
        this.account.address,
        this.disbursementFormStub.recipient.value,
        this.disbursementFormStub.amount.value
      ).pipe(first()).subscribe(res => {
        console.log(res);
      });
    }
    console.log(this.disbursementFormStub.transactionType.value);
    this.submitted = false;
  }

  cancel(): void {
    this.cancelDisbursmentEvent.emit();
  }
}