import { Component, OnInit, ChangeDetectionStrategy, forwardRef, ViewChild, ElementRef, Input, Output, EventEmitter, Renderer2 } from '@angular/core';
import { NG_VALUE_ACCESSOR, ControlContainer, NgForm } from '@angular/forms';
import { ApplyMaskService } from '../../services/apply-mask.service';
import { UuidUtils } from '../../utilities/uuid-utils';

const LAST_4_NO_INDEX = 6;
const TIN_MASK = '00-0000000';
const ASTERISK_MASK = '**-***';
@Component({
  selector: 'rbj-tin-input',
  templateUrl: './tin-input.component.html',
  styleUrls: ['./tin-input.component.scss'],
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => TinInputComponent),
      multi: true
    }
  ],
  viewProviders: [{ provide: ControlContainer, useExisting: NgForm }]
})
export class TinInputComponent implements OnInit {

  @ViewChild('inputBox', { static: true }) input: ElementRef;
  private _value: string;
  private _initialized: boolean;
  private _readOnly: boolean;
  disabledState: boolean = false;
  outputWithSymbol: boolean = true;
  uuid: string = UuidUtils.generate();
  name: string;
  inputMask = ""
  @Input() id?: string = ''
  @Input() placeholder: string;
  @Input() inputClass: string;
  @Input() size: string = 'medium';

  @Input()
  public set readonly(value) {
    this._readOnly = typeof value !== 'undefined' && value !== false;
  }

  public get readonly(): boolean {
    return this._readOnly;
  }


  private _text: string;
  public get text(): string {
    return this._text;
  }
  public set text(v: string) {

    if (this._text != v) {
      this._text = v;
    }

  }


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

    if (this._initialized) {
      v = this.outputWithSymbol ? v : v.replace(/[^\d]/g, '');
      if (v != this._value) {

        if (v == "  -") v = '';
        this._value = v;
        this.onChange(this.value);
      }
    } else {
      this._initialized = true;
      this._value = v;
    }
  }

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

  onChange = (value: string) => { };
  onTouched = () => { };

  onFocus() {
    this.inputMask = TIN_MASK;
    this.text = this.value;
  }
  onFocusout() {
    this.value = this.text;
    this.setAsteriskMask();
  }
  constructor(
    private renderer: Renderer2,
    private el: ElementRef,) { }

  ngAfterViewInit() {
    this.renderer.removeAttribute(this.el.nativeElement, 'id')
  }

  //#region Implements
  writeValue(value: string): void {

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

  private setAsteriskMask() {
    this.inputMask = "";
    this.text = '';
    if (this.value && this.value.length > LAST_4_NO_INDEX) {
      this.text = ASTERISK_MASK + this.value.substr(LAST_4_NO_INDEX);
    }
  }
  //#endregion
  ngOnInit() {
  }

}