import {
  Component,
  ElementRef,
  ViewChild,
  Input,
  forwardRef
} from '@angular/core';
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';

export const ATM_INPUT_VALUE_ACCESSOR: any = {
  provide: NG_VALUE_ACCESSOR,
  useExisting: forwardRef(() => AtmInputComponent),
  multi: true
};

const DEFAULT_VALUE = null;

@Component({
  selector: 'app-atm-input',
  templateUrl: './atm-input.component.html',
  styleUrls: ['./atm-input.component.css'],
  providers: [ATM_INPUT_VALUE_ACCESSOR]
})
export class AtmInputComponent implements ControlValueAccessor {
  @ViewChild('atm') atmElement: ElementRef;
  private _value = DEFAULT_VALUE;
  disabled = false;
  // placeholders for the callbacks which are later provided by the Control Value Accessor
  private onTouchedCallback: () => void = null;
  private onChangeCallback: (_: any) => void = null;

  // get accessor
  get value(): any {
    return this._value;
  }

  // set accessor including call the onchange callback
  set value(value: any) {
    this.writeValue(value);
    this.onChangeCallback(value);
  }

  // from ControlValueAccessor interface
  setDisabledState?(isDisabled: boolean): void {
    this.disabled = isDisabled;
  }

  // set touched on blur
  onBlur() {
    this.onTouchedCallback();
  }

  // from ControlValueAccessor interface
  writeValue(obj: any): void {
    if (obj !== this._value) {
      let value = parseFloat(obj);
      value = isNaN(value) ? null : obj;
    }
  }

  // from ControlValueAccessor interface
  registerOnChange(fn: any): void {
    this.onChangeCallback = fn;
  }

  // from ControlValueAccessor interface
  registerOnTouched(fn: any): void {
    this.onTouchedCallback = fn;
  }

  atmKeyUp(event: KeyboardEvent) {
    const value = this.atmElement.nativeElement.value;
    const raw = value.replace('.', '');
    let formatted = this.formatNumber(raw);
    this.atmElement.nativeElement.value = formatted;
    this.writeValue(formatted);
    this.onChangeCallback(formatted);
  }

  formatNumber(number) {
    if (!number) {
      return DEFAULT_VALUE;
    }
    const parsed = parseFloat(number);
    if (isNaN(parsed)) {
      return DEFAULT_VALUE;
    }
    const formatted = (parsed / 100).toFixed(2);
    return formatted;
  }

  ignoreKeys(e) {
    if (
      e.keyCode === 8 ||
      e.keyCode === 46 ||
      e.keyCode === 9 ||
      (e.keyCode >= 96 && e.keyCode <= 105) ||
      (e.keyCode >= 48 && e.keyCode <= 57)
    ) {
      return true;
    } else {
      return false;
    }
  }
}