import { Observable } from 'rxjs/Observable';
import { AfterViewInit, Component, ElementRef, OnInit, ViewChild } from '@angular/core';
import { Router } from '@angular/router';
import { first, tap, debounceTime } from 'rxjs/operators';
import { AppState } from '../../stores/app-state.store';
import { ContactType } from './../../enums/contact-type.enum';
import { concat } from 'rxjs/observable/concat';

@Component({
  selector: 'app-new-payment',
  templateUrl: './new-payment.component.html',
  styleUrls: ['./new-payment.component.css'],
})
export class NewPaymentComponent implements OnInit, AfterViewInit {
  types = ContactType;
  @ViewChild('userFormPay')
  payform;
  @ViewChild('contactModel')
  contactModel;
  @ViewChild('contactElement')
  contactElement: ElementRef;
  isvisible = false;
  contact = '';
  memo = '';
  phoneNumberFormatted: string;
  isAppValid = false;
  phoneNumberValue: number;
  cleanValue: string;
  init$: Observable<any>;
  contactType = ContactType.Invalid;
  isContactValid = false;

  constructor(private router: Router, private app: AppState) {}

  ngAfterViewInit(): void {
    this.contactElement.nativeElement.focus();
  }

  ngOnInit() {
    this.init$ = this.app.state$.pipe(
      debounceTime(1000),
      tap((state) => {
        this.contact = this.app.getContactInfo();
        this.isAppValid = state.isValid;
        this.onContactChanged();
      })
    );
  }

  submit() {
    if (!this.app.isValid) {
      return;
    }

    this.app.payment.memo = this.memo;
    this.app.isNew = true;
    this.app.setContactInfo(this.contact);
    this.app.template.payFromBankAccount = this.app.bankAccount;
    this.router.navigate(['payment/create']);
  }

  resetPayForm() {
    this.contact = '';
    this.memo = '';
  }

  private setContactType() {
    if (!this.contact) {
      this.contactType = ContactType.Invalid;
      return;
    }

    if (this.contact.includes('@')) {
      this.contactType = ContactType.Email;
      return;
    }
    if (this.contact.length > 7) {
      const removeSpecialCharacters = this.contact.replace('(', '');
      this.phoneNumberValue = parseInt(removeSpecialCharacters, 10);
    }
    if (this.phoneNumberValue >= 1) {
      if (
        this.contact.length === 7 ||
        this.contact.length === 10 ||
        (this.contact.length > 10 && this.contact.includes('(')) ||
        (this.contact.length > 10 && this.contact.includes('-')) ||
        (this.contact.length > 10 && this.contact.includes('.')) ||
        (this.contact.length > 10 && this.contact.includes('+'))
      ) {
        this.contactType = ContactType.Phone;
        return;
      }
    }
    this.contactType = ContactType.Invalid;
  }

  formatPhoneNumber(phoneNumber: string) {
    if (phoneNumber.length === 7) {
      const firstValue = phoneNumber.substring(0, 3);
      const secondValue = phoneNumber.substring(3, 7);
      this.contactElement.nativeElement.value = firstValue + '-' + secondValue;
      return;
    }
    if (phoneNumber.length > 13) {
      const removeOneValue = phoneNumber.replace('+1', '');
      this.cleanValue = ('' + removeOneValue).replace(/\D/g, '');
    } else {
      this.cleanValue = ('' + phoneNumber).replace(/\D/g, '');
    }
    const match = this.cleanValue.match(/^(\d{3})(\d{3})(\d{4})$/);
    if (match) {
      this.contactElement.nativeElement.value = '(' + match[1] + ')' + match[2] + '-' + match[3];
    }
    return null;
  }

  private validateContact() {
    this.setContactType();
    return (
      this.contactModel.pristine || (this.contactModel.dirty && this.contactType !== ContactType.Invalid)
    );
  }

  onContactChanged() {
    this.isContactValid = this.validateContact();
    if (this.contactType === ContactType.Invalid) {
      return;
    }
    if (this.contactType === ContactType.Phone) {
      this.formatPhoneNumber(this.contact);
    }
    this.contact = this.app.trim(this.contact);
    this.app.setContactInfo(this.contact);
  }
}