import { Observable } from 'rxjs/Observable';
import { Component, Input, OnDestroy, OnInit } from '@angular/core';
import { filter, tap, map } from 'rxjs/operators';
import { BankAccount } from '../models';
import { MaskPipe } from '../pipes';
import { SessionStore } from '../stores';
import { AppState } from '../stores/app-state.store';

@Component({
  selector: 'app-account-label',
  templateUrl: './account-label.component.html',
  styleUrls: ['./account-label.component.css'],
})
export class AccountLabelComponent implements OnInit, OnDestroy {
  @Input()
  account?: BankAccount;
  hideMaskedAccount = false;
  useInput: boolean;
  account$: Observable<BankAccount>;

  constructor(private sessionStore: SessionStore, private app: AppState) {}

  ngOnInit() {
    this.account$ = this.app.state$.pipe(
      filter((state) => !!state && !!state.bankAccount && !this.account),
      map((state) => state.bankAccount),
      tap((bankAccount) => {
        this.account = bankAccount;
      })
    );
  }

  ngOnDestroy(): void {}
  get accountNumber() {
    const maskPipe = new MaskPipe();
    return maskPipe.transform(this.account.accountNumber);
  }
  get payFromAccount() {
    if (!this.account) {
      return null;
    }
    if (this.hideMaskedAccount) {
      return this.account.name;
    } else {
      const maskPipe = new MaskPipe();
      const maskedAccountNumber = maskPipe.transform(this.account.accountNumber);
      return this.account.name
        ? `${this.account.name} - ${maskedAccountNumber}`
        : `${this.account.accountType} Account - ${maskedAccountNumber}`;
    }
  }
}