import {AfterViewInit, Directive, ElementRef, Input, OnChanges, OnDestroy, SimpleChanges} from '@angular/core';
import {CurrencyPipe} from '@angular/common';
import {AbstractControl} from '@angular/forms';
import {Subscription} from 'rxjs';

@Directive({
  selector: '[libFormatPrice]'
})
export class FormatPriceDirective implements AfterViewInit, OnChanges, OnDestroy {

  @Input() control: AbstractControl;
  @Input() currency: string;
  private _el: HTMLInputElement;
  private _value: any;
  private _subscription: Subscription;

  constructor(
    private _elRef: ElementRef,
    private _currency: CurrencyPipe
  ) {
    this._subscription = new Subscription();
    this._el = this._elRef.nativeElement;
  }

  private static removeError(control: AbstractControl, error: string): void {
    const err = control.errors; // get control errors
    if (err) {
      delete err[error]; // delete your own error
      if (!Object.keys(err).length) { // if no errors left
        control.setErrors(null); // set control errors to null making it VALID
      } else {
        control.setErrors(err); // controls got other errors so set them back
      }
    }
  }

  ngOnChanges(changes: SimpleChanges): void {
    if (changes['currency'] && changes['currency'].currentValue) {
      if (this._value) {
        this.validateFormatPrice(this._value);
      }
    }
    if (changes['control'] && changes['control'].currentValue) {
      this._subscription.add(
        this.control.valueChanges.subscribe(response => {
          this._value = response;
        })
      );
    }
  }

  ngAfterViewInit(): void {
    this._el.addEventListener('focus', this.onFocus.bind(this));
    this._el.addEventListener('blur', this.onBlur.bind(this));
    this._value = this._el.value;
    this._el.value = this.formatPrice(this._el.value);
  }

  ngOnDestroy(): void {
    this._subscription.unsubscribe();
    this._el.removeEventListener('focus', this.onFocus.bind(this));
    this._el.removeEventListener('blur', this.onBlur.bind(this));
  }

  private formatPrice(value: any): any {
    return this._currency.transform(value, this.currency && this.currency !== 'MXN' ? this.currency : null, 'symbol', '1.0-0');
  }

  private onFocus() {
    this._el.value = this._value;
  }

  private onBlur(event: any) {
    this.validateFormatPrice(event.target.value);
  }

  private validateFormatPrice(value: any): void {
    if (Number.isNaN(Number(value))) {
      this.control.setErrors({
        format: true
      });
      return;
    }
    FormatPriceDirective.removeError(this.control, 'format');
    this._value = value;
    this._el.value = this.formatPrice(value);
  }
}