import {Component, Inject, OnInit} from '@angular/core';
import {MAT_DIALOG_DATA, MatAutocompleteSelectedEvent, MatDialogRef} from '@angular/material';
import {debounceTime, distinctUntilChanged, map, startWith, switchMap} from 'rxjs/operators';
import {Account} from '../account/account';
import {AccountService} from '../account/account.service';
import {FormBuilder, FormGroup} from '@angular/forms';
import {Observable, of as observableOf} from 'rxjs';

@Component({
  selector: 'app-receipt-dialog',
  templateUrl: './receipt-dialog.component.html',
  styleUrls: ['./receipt-dialog.component.css']
})
export class ReceiptDialogComponent implements OnInit {
  accounts: Observable<Account[]>;
  form: FormGroup;
  account: Account;
  accBal: any;

  constructor(
    public dialogRef: MatDialogRef<ReceiptDialogComponent>,
    @Inject(MAT_DIALOG_DATA) public data: any,
    private fb: FormBuilder,
    private accountSer: AccountService) {
    this.createForm();
    this.setupAccountAutocomplete();
  }

  ngOnInit() {
    this.form.setValue({
      account: this.data.journal.account,
      amount: this.data.journal.amount
    });
    this.account = this.data.journal.account;
  }

  createForm() {
    this.form = this.fb.group({
      account: '',
      amount: ''
    });
    this.accBal = null;
  }

  setupAccountAutocomplete(): void {
    const control = this.form.get('account');
    this.accounts = control.valueChanges
      .pipe(
        startWith(null),
        map(x => (x !== null && x.length >= 1) ? x : null),
        debounceTime(150),
        distinctUntilChanged(),
        switchMap(x => (x === null) ? observableOf([]) : this.accountSer.autocomplete(x))
      );

  }

  displayAccount(account?: Account): string | undefined {
    return account ? account.name : undefined;
  }

  accountSelected(event: MatAutocompleteSelectedEvent): void {
    this.account = event.option.value;
    this.accountSer.balance(this.account.id, this.data.date).subscribe((v) => {
      this.accBal = v;
    });
  }

  accept(): void {
    const formValue = this.form.value;
    const amount = +formValue.amount;
    this.data.journal.account = this.account;
    this.data.journal.amount = amount;
    this.dialogRef.close(this.data.journal);
  }
}