import { Directive, Input, OnInit, HostListener } from '@angular/core';
import { NgControl } from '@angular/forms';
import { CustomerService } from '../../core/services/customer.service';
import { Customer } from '../../core/models/customer.model';
@Directive({
  selector: '[phoneMasking]'
})
export class PhoneMaskingDirective implements OnInit {
  country: string = 'US';
  private PNF = require('google-libphonenumber').PhoneNumberFormat;
  private phoneUtil = require('google-libphonenumber').PhoneNumberUtil.getInstance();
  private AsYouTypeFormatter = require('google-libphonenumber').AsYouTypeFormatter;
  private formatter = new this.AsYouTypeFormatter(this.country);
  formattedPhone: string;
  customer: Customer;
  addPlus: boolean = false;

  constructor(
        private control: NgControl,
        private customerService: CustomerService
      ) {}
  ngOnInit() {
      if (this.control.control.value) {
        this.formattedPhone = this.control.control.value;
        let newFormatted = this.phoneUtil.parse(this.formattedPhone, this.country);
      }
      this.customerService.getUserInfo().subscribe(customer => this.customer = customer);
      if(this.customer !== null) {
          this.country = this.customer.mainCountry;
      }
  }
  @HostListener('change') onChange() {
      this.formattedPhone = this.control.control.value;
      let newFormatted = this.phoneUtil.parse(this.formattedPhone, this.country);
      this.control.control.setValue(this.phoneUtil.format(newFormatted, this.country));
      this.formattedPhone = this.control.control.value;
      this.control.control.markAsDirty();
  }
  @HostListener('keydown', ['$event']) onkeydown(event) {
    this.control.control.markAsDirty();
      //only runs if a number key without shift key held down is clicked or '+' key
    if (((event.keyCode >= 48 && event.shiftKey === false) && (event.keyCode <= 57 && event.shiftKey === false))
        || ((event.keyCode >= 96 && event.shiftKey === false) && (event.keyCode <= 105 && event.shiftKey === false))
        || (event.keyCode == 187 && event.shiftKey === true) || event.keyCode == 107) {
        if (this.formattedPhone !== undefined) {
            event.preventDefault();
        }
        this.formattedPhone = this.formatter.inputDigit(event.key);
        this.formattedPhone.indexOf('+') > -1 ? this.addPlus = true : this.addPlus = false;
        if (this.formattedPhone.length <= 1) {
            event.preventDefault();
        }
        this.control.control.setValue(this.formattedPhone);
        //only runs if backspace or delete is clicked
    } else if (event.keyCode == 8 || event.keyCode == 46) {
        event.preventDefault();
        this.formattedPhone = this.formattedPhone.substring(0, this.formattedPhone.length - 1);
        this.formattedPhone.indexOf('+') > -1 ? this.addPlus = true : this.addPlus = false;
        this.formatter.clear();
        let phoneArray = this.formattedPhone.replace(/\D+/g, '').split('');
        if (this.addPlus === true) {
            this.formatter.inputDigit('+');
        }
        phoneArray.map(digit => {
            this.formattedPhone = this.formatter.inputDigit(digit);
        })
        this.control.control.setValue(this.formattedPhone);
        //runs when ctrl + v
    } else if ((event.keyCode == 86 && event.ctrlKey === true) || event.keyCode == 9) {
        return;
        //runs when anything else is clicked
    } else {
        event.preventDefault();
    }
  }
}