import { TemplateService } from './../services/template.service';
import { ChangeDetectorRef, Component, ElementRef, OnDestroy, OnInit, ViewChild } from '@angular/core';
import { Router } from '@angular/router';
import { filter, tap } from 'rxjs/operators';
import { Subscription } from 'rxjs/Subscription';
import { MultiFactorTypes } from '../enums/multi-factor-types';
import { BankAccount, MultiFactorModel, Payment, Template } from '../models';
import { LimitsResult } from '../models/limits-result.model';
import { MaskPipe } from '../pipes';
import { MaterialService } from '../services';
import { SessionStore } from '../stores';
import { AppState } from '../stores/app-state.store';
import { AutoCompleteComponent } from './auto-complete';
import { PayingAgainComponent } from './paying-again';

@Component({
  selector: 'app-sending-money',
  templateUrl: './sending-money.component.html',
  styleUrls: ['./sending-money.component.css'],
})
export class SendingMoneyComponent implements OnInit, OnDestroy {
  @ViewChild('integralInput') input: ElementRef;
  @ViewChild('decimalInput') decimalinput: ElementRef;
  @ViewChild('Amount') amount;
  @ViewChild('userForm') form;
  @ViewChild(AutoCompleteComponent)
  private autoCompleteComponent: AutoCompleteComponent;
  isCopied = false;
  isNewPayment = false;
  isAgainPayment = false;
  isLookUp = false;
  showChangeAccount = false;
  showAuthRequest = false;
  showAuthMethod = false;
  showAuthRepeat = false;
  showAuthInput = false;
  integralAmount = null;
  decimalAmount = null;
  payment = new Payment();
  account: BankAccount;
  template: Template;
  missingPayFromAccount = false;
  hideMaskedAccount = false;
  loaderHeader = '';
  message = '';
  isLoading = false;
  authRequired = true;
  limitResult: LimitsResult;
  limitSubscription: Subscription;
  defaultAccountSubscription: Subscription;
  stateSubscription: Subscription;
  loadingLimits = false;

  constructor(
    public app: AppState,
    public sessionStore: SessionStore,
    private materialService: MaterialService,
    private router: Router,
    private ref: ChangeDetectorRef,
    private templateService: TemplateService
  ) {}

  ngOnInit() {
    this.app.acknowledgeDuplicate = false;
    this.templateService.reloadCache();
    this.app.template = null;
    this.defaultAccountSubscription = this.app
      .getDefaultAccount()
      .filter((bankAccount) => !!bankAccount)
      .subscribe((bankAccount) => {
        this.setDefaultAccount(bankAccount);
      });

    this.app.state$
      .pipe(
        filter((state) => state !== null && state !== undefined),
        tap((state) => {
          this.authRequired = this.isAuthRequired(state.multiFactorModel);
        })
      )
      .subscribe((state) => {
        this.limitResult = state.limitsResult;
        this.loadingLimits = state.loadingIsLimits;
      });

    console.log('app-user-form component loaded');
    this.materialService.render();
    setTimeout(() => {
      this.input.nativeElement.focus();
    }, 0);
  }

  ngOnDestroy(): void {
    if (this.defaultAccountSubscription) {
      this.defaultAccountSubscription.unsubscribe();
    }
  }

  private isAuthRequired(model: MultiFactorModel): boolean {
    const type = model && model.mfaType ? model.mfaType : '';
    if (type === MultiFactorTypes.Never) {
      return false;
    }
    return true;
  }

  updateIntegral(value) {
    if (!value) {
      return;
    }
    const val = value.replace(/\D/g, '');
    this.integralAmount = val;
    this.input.nativeElement.value = val;
    this.updateAmount();
  }

  updateDecimal(value) {
    if (!value) {
      return;
    }
    const val = value.replace(/\D/g, '');
    this.decimalAmount = val;
    this.decimalinput.nativeElement.value = val;
    this.updateAmount();
  }

  updateAmount(event?) {
    const amt = parseFloat(`${this.integralAmount}.${this.decimalAmount}`);
    this.payment.amount = amt;
    this.app.payment = this.payment;
    this.ref.detectChanges();
  }

  showLookUp() {
    this.isLookUp = true;
  }

  hideLookUp() {
    this.isLookUp = false;
  }

  showNewPayment() {
    this.isNewPayment = true;
    this.isAgainPayment = false;
    this.isAmountValid();
    this.authRequired = this.isAuthRequired(this.app.multiFactorModel);
  }

  showAgainPayment(template: Template) {
    this.isNewPayment = false;
    this.isAgainPayment = true;
    this.template = template;
    this.isMissingPayFromAccount();
    this.authRequired = this.isAuthRequired(this.app.multiFactorModel);
    this.setDefaultAccount(this.app.template.payFromBankAccount);
  }

  isMissingPayFromAccount() {
    this.missingPayFromAccount = false;
    if (
      this.template.customerMessages.length > 0 ||
      (this.template.payFromBankAccount && this.template.payFromBankAccount.accountNumber.length < 2)
    ) {
      this.missingPayFromAccount = true;
    }
  }

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

  toggleChangeAccount() {
    this.showChangeAccount = !this.showChangeAccount;
  }

  toggleAuthRequest() {
    this.showAuthRequest = !this.showAuthRequest;
  }

  toggleAuthMethod() {
    this.showAuthMethod = !this.showAuthMethod;
  }

  toggleAuthRepeat() {
    this.showAuthRepeat = !this.showAuthRepeat;
  }

  toggleAuthInput() {
    this.showAuthInput = !this.showAuthInput;
  }

  isAuthCheck() {
    if (!this.app.hasPassedMfa) {
      this.input.nativeElement.blur();
      event.preventDefault();
      this.app.useMfaModal = true;
      this.toggleAuthRequest();
    } else {
      return;
    }
  }

  setDefaultAccount(account: BankAccount) {
    console.log('setting default account', account);
    if (!account || !account.id) {
      return;
    }
    this.account = account;
    this.showChangeAccount = false;
    this.app.bankAccount = account;
    if (
      this.app.template &&
      this.app.template.payFromBankAccount &&
      !this.app.template.payFromBankAccount.id
    ) {
      this.app.template.payFromBankAccount = account;
    }
  }

  increaseSize(event: KeyboardEvent) {
    const length = this.input.nativeElement.value.length;
    if (length > 0 && length < 6) {
      this.input.nativeElement.style.width = (this.input.nativeElement.value.length + 1) * 47 + 'px';
    }
  }

  decreaseSize() {
    if (this.input.nativeElement.value.length > 0) {
      this.input.nativeElement.style.width = (this.input.nativeElement.value.length - 1) * 47 + 'px';
    }
  }

  addingCents() {
    this.decimalinput.nativeElement.focus();

    setTimeout(() => {
      this.decimalinput.nativeElement.value = '';
    }, 0);
  }

  deletedCents() {
    if (this.decimalAmount) {
      return;
    }
    this.input.nativeElement.focus();
    this.decimalAmount = null;
  }

  resetForm() {
    this.integralAmount = '';
    this.decimalAmount = '';
    this.updateAmount();
    this.input.nativeElement.style.width = '52px';
    this.isNewPayment = false;
    this.isAgainPayment = false;
    this.form.reset();
    this.autoCompleteComponent.resetAutoCompleteForm();
  }

  isAmountValid() {
    return this.amount.pristine || (this.amount.dirty && this.amount.valid && this.integralAmount > 0);
  }

  keyDown(event: KeyboardEvent) {
    switch (event.key) {
      case 'Backspace':
      case 'Delete':
        this.decreaseSize();
        break;
      case 'Dot':
      case 'Decimal':
      case '.':
        this.addingCents();
        break;
      case '0':
      case '1':
      case '2':
      case '3':
      case '4':
      case '5':
      case '6':
      case '7':
      case '8':
      case '9':
      case 'Unidentified':
        this.increaseSize(event);
        break;
    }
  }

  decimalKeyDown(event: KeyboardEvent) {
    switch (event.key) {
      case 'Backspace':
      case 'Delete':
        this.deletedCents();
        break;
    }
  }

  submitPayment() {
    this.router.navigate(['/payment/create']);
  }
}