import {
  Component,
  Input,
  Output,
  EventEmitter,
  OnInit,
  ChangeDetectorRef
} from '@angular/core';
import { CallbackModel } from '../../models/callback-model';
import { GenericHelper } from '../../helpers/generic-helper';
import { FormControl, FormGroup, NgForm, AbstractControl } from '@angular/forms';

@Component({
  selector: 'app-form-phonepicker',
  templateUrl: './form-phonepicker.component.html',
  styleUrls: ['./form-phonepicker.component.scss']
})
export class FormPhonepickerComponent implements OnInit {
  @Output() methodToExecute: EventEmitter<any> = new EventEmitter<any>();

  @Input() defPhoneNum: string = '';

  @Input() countryCodes: string[];

  @Input() areaCodes: string[];

  @Input() mobilePlaceholder: string;

  @Input() genericErrorMessage?: string = 'Unable to display control';

  @Input() formGrp: FormGroup;
  @Input() numCountryCode: string;
  @Input() numAreaCode: string;
  @Input() numName1: string;
  @Input() numName2: string;

  @Input() formDir?: NgForm;

  selectedCountryCode: string;
  selectedAreaCode: string;
  num1: string;
  num2: string;

  error: boolean = false;

  control1: AbstractControl;
  control2: AbstractControl;
  control3: AbstractControl;
  control4: AbstractControl;


  constructor(private ref: ChangeDetectorRef) { }

  ngOnInit() {
    this.initializePhoneNumbers();
    this.initalizeControls();
  }

  initalizeControls() {
    this.control1 = this.formGrp.get(this.numCountryCode);
    this.control2 = this.formGrp.get(this.numAreaCode);
    this.control3 = this.formGrp.get(this.numName1);
    this.control4 = this.formGrp.get(this.numName2);
  }

  initializePhoneNumbers() {
    if (
      this.countryCodes &&
      this.countryCodes.length > 0 &&
      this.areaCodes &&
      this.areaCodes.length > 0
    ) {
      if (this.defPhoneNum) {

        const possibCountryCodes: string[] = this.countryCodes.filter(code =>
          this.defPhoneNum.startsWith(code)
        );

        // clean dashes and spaces
        this.defPhoneNum = this.defPhoneNum.replace(/-/g, '');
        this.defPhoneNum = this.defPhoneNum.replace(/ /g, '');

        // assume first position to be country code and remove from passed in default phone number
        this.selectedCountryCode = possibCountryCodes.length > 0 ? possibCountryCodes[0] : '';
        this.defPhoneNum = this.defPhoneNum.replace(
          this.selectedCountryCode,
          ''
        );

        const possibAreaCodes: string[] = this.areaCodes.filter(code => {
          return this.defPhoneNum.startsWith(code) || code == '';
        });

        // assume first position to be area code and remove from passed in default phone number
        this.selectedAreaCode = possibAreaCodes.length > 0 ? possibAreaCodes[0] : '';
        this.defPhoneNum = this.defPhoneNum.replace(this.selectedAreaCode, '');

        // assume first 4 characters of remaining string belongs to first box.
        this.num1 = this.defPhoneNum.substring(0, 4);
        this.num2 = this.defPhoneNum.substring(4);

        this.ref.detectChanges();

      }
    } else {
      this.error = true;
    }
  }

  validatePhoneNumber(): boolean {
    // will we be checking against API for correct mobile number?
    return false;
  }

  onMobileChange(obj: any, key: string) {
    this[key] = obj;

    this.validatePhoneNumber();

    const newNum =
      this.selectedCountryCode + this.selectedAreaCode + this.num1 + this.num2;
    this.methodToExecute.emit(newNum);
  }
}
