import {
  Component,
  EventEmitter,
  Input,
  OnChanges,
  OnInit,
  Output,
  SimpleChanges
} from '@angular/core';

import { BankAccount, Session, Template } from '../../models';
import { TemplateService } from '../../services';
import { AuthService } from '../../services/auth.service';
import { SessionStore } from '../../stores';
import { AppState } from '../../stores/app-state.store';
import { filter, map } from 'rxjs/operators';

@Component({
  selector: 'app-change-account',
  templateUrl: './change-account.component.html',
  styleUrls: ['./change-account.component.css']
})
export class ChangeAccountComponent implements OnInit, OnChanges {
  @Output()
  closeChangeAccount = new EventEmitter();
  @Output()
  setAndCloseAccount = new EventEmitter();
  @Input()
  template: Template;

  session: Session;
  accounts: BankAccount[];

  constructor(private app: AppState) {}

  ngOnInit() {
    this.app.state$.pipe(filter(state => state !== null)).subscribe(state => {
      this.accounts = state.accounts;
    });
  }

  ngOnChanges(changes: SimpleChanges) {
    if (changes['template'] && this.isIdValid() && this.isAccountsValid()) {
      const matched = this.accounts.filter(a => a.id === this.template.payFromBankAccount.id);
      if (matched.length > 0) {
        this.setDefaultAccount(matched[0]);
      }
    }
  }

  isAccountsValid() {
    return this.accounts !== null && this.accounts !== undefined && this.accounts.length > 0;
  }

  isIdValid(): boolean {
    return this.template !== undefined && this.template !== null;
  }

  toggleChangeAccount(event: Event) {
    this.closeChangeAccount.emit();
  }

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

  setDefaultAccount(account: BankAccount) {
    this.setAndCloseAccount.emit(account);
  }
}