import { Component, OnInit, ChangeDetectionStrategy, forwardRef, ViewChild, ElementRef, Output, Input, EventEmitter, Renderer2 } from '@angular/core';
import { NG_VALUE_ACCESSOR, ControlContainer, NgForm, NgModel } from '@angular/forms';
import { ApplyMaskService } from '../../services/apply-mask.service';
import { Util } from 'leaflet';
import { StringUtils } from '../../utilities/string-utils';
import { UuidUtils } from '../../utilities/uuid-utils';
import { NbPopoverDirective } from '@nebular/theme';
@Component({
  selector: 'rbj-phone-input',
  templateUrl: './phone-input.component.html',
  styleUrls: ['./phone-input.component.scss'],
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => PhoneInputComponent),
      multi: true
    }
  ],
  viewProviders: [{ provide: ControlContainer, useExisting: NgForm }]
})
export class PhoneInputComponent implements OnInit {

  @ViewChild('inputBox', { static: true }) input: NgModel;
  @ViewChild(NbPopoverDirective) popover: NbPopoverDirective;
  private _value: string;
  private _initialized: boolean;
  private _legalInput: boolean = false;
  private _allowExtension: boolean = true;
  private _lastBlurValue: string;
  _readOnly: boolean;


  onChange = (value: string) => { };
  onTouched = () => { };
  uuid: string = UuidUtils.generate();
  name: string;
  outputWithSymbol: boolean = true;
  isValid: boolean = true;


  @Input() id?: string = ''
  @Input() placeholder: string;
  @Input() class: string;
  @Input() size: string = 'medium';
  @Input() maskExpression: string = '(000) 000-0000';
  @Input() extensionMask: string = ' ??????????';
  _disabled = false;
  @Input()
  public set readonly(value) {
    this._readOnly = typeof value !== 'undefined' && value !== false;
  }
  public get readonly(): boolean {
    return this._readOnly;
  }

  @Input()
  public set allowExtension(value) {
    this._allowExtension = typeof value !== 'undefined' && value !== false;
  }
  public get allowExtension(): boolean {
    return this._allowExtension;
  }


  @Output() inputChange = new EventEmitter<string>();
  @Output() focus = new EventEmitter();

  constructor(
    private renderer: Renderer2,
    private el: ElementRef, private applyMaskService: ApplyMaskService) { }

  ngAfterViewInit() {
    this.renderer.removeAttribute(this.el.nativeElement, 'id')
  }
  //#region Implements
  writeValue(value: string): void {
    if (value) {
      if (value == "(   )    -") value = "";

      this.value = this.outputWithSymbol ? value : value.replace(/[^\d]/g, '');
      //this.setDisplayFormat(this.value);
    } else {
      this.value = null;
    }
    this._lastBlurValue = this.value;
    //this.onChange(this.value);
  }
  registerOnChange(fn: (value: string) => void): void {
    this.onChange = fn;
  }
  registerOnTouched(fn: any): void {
    this.onTouched = fn;
  }
  setDisabledState?(isDisabled: boolean): void {
    this._disabled = isDisabled;
  }
  //#endregion


  public get value(): string {
    return this._value;
  }
  public set value(v: string) {

    if (this._initialized) {
      if (v != this._value) {
        this._value = v;
      }
    } else {
      this._initialized = true;
      this._value = v;
    }
  }

  onFocus() {

    if (this.input.invalid) {

      this.popover.show();
    } else {

      this.popover.hide();
    }
  }
  onFocusOut() {
    if (this.input.invalid) {
      setTimeout(() => {
        this.el.nativeElement.querySelector('input').focus();
      }, 200);
    } else {

      this.popover.hide();
    }
  }
  ShowPopover() {
  }

  ngOnInit() {
  }
  onBlur() {
    if (this._lastBlurValue != this.value) {
      this.onChange(this.value);
      this._lastBlurValue = this.value;
    }
  }
}
