import { ChangeDetectionStrategy, ChangeDetectorRef, Component, EventEmitter, forwardRef, Input, OnInit, Output } from '@angular/core';
import { NG_VALUE_ACCESSOR, NG_VALIDATORS, ControlValueAccessor } from '@angular/forms';

@Component({
  selector: 'adj-number-input',
  templateUrl: './adjacent-number-input.component.html',
  styleUrls: ['./adjacent-number-input.component.scss'],
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => AdjacentNumberInputComponent),
      multi: true
    },
  ],
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class AdjacentNumberInputComponent implements ControlValueAccessor, OnInit {

  currentNumber: number;
  disabled: boolean;
  maximum: number = null;
  minimum: number = null;
  @Input("maximum")
  public set input_maximum(value) {
    if (typeof value !== "undefined" && value !== null) {
      this.maximum = Number.parseInt(value);
    } else {
      this.maximum = null;
    }
  }
  @Input("minimum")
  public set input_minimum(value) {
    if (typeof value !== "undefined" && value !== null) {
      this.minimum = Number.parseInt(value);
    } else {
      this.minimum = null;
    }
  }
  showMaximum: boolean = false;
  @Input("showMaximum")
  public set input_showMaximum(value) {
    this.showMaximum = typeof value !== "undefined" && value !== false;
  }

  hideIncreaseBtn: boolean = false;
  @Input("hideIncreaseBtn")
  public set input_hideIncreaseBtn(value) {
    this.hideIncreaseBtn = typeof value !== "undefined" && value !== false;
  }

  @Input() size = 'small';
  @Input() title = '';
  @Output() change = new EventEmitter<number>();
  @Output() focus = new EventEmitter();
  @Output() blur = new EventEmitter<number>();
  @Output() hitMinimum = new EventEmitter<number>();
  @Output() hitMaximum = new EventEmitter<number>();
  @Output() hitIncreasing = new EventEmitter<number>();
  @Output() hitDecreasing = new EventEmitter<number>();
  @Output() hitChange = new EventEmitter<number>();

  onChange = (value: number) => {
  };
  onTouched = () => { };
  constructor(
    private cdRef: ChangeDetectorRef
  ) { }
  writeValue(obj: number): void {
    if (this.currentNumber != obj) {

      this.currentNumber = obj;
      this.onChange(obj);
      this.cdRef.detectChanges();
    }
  }

  registerOnChange(fn: (value: number) => void): void {
    this.onChange = fn;
  }
  registerOnTouched(fn: any): void {
    this.onTouched = fn;
  }
  setDisabledState?(isDisabled: boolean): void {
    this.disabled = isDisabled;
  }


  public get titleHtml(): string {
    let displayText = this.title;
    if (this.showMaximum) {
      displayText = `${this.title} (Max. ${this.maximum})`
    }
    return displayText;
  }


  ngOnInit(): void {

  }

  adjustNumber(adding: boolean) {
    if (adding) {
      if (null == this.maximum || this.currentNumber < this.maximum) {
        this.currentNumber++;
        this.hitIncreasing.next(1);
        this.hitChange.next(1);

      } else {
        this.hitMaximum.next(this.currentNumber);
      }
    } else {
      if (null == this.minimum || this.currentNumber > this.minimum) {
        this.currentNumber--;
        this.hitDecreasing.next(1);
        this.hitChange.next(-1);
      } else {
        this.hitMinimum.next(this.currentNumber);
      }
    }
    this.onChange(this.currentNumber);
    this.cdRef.detectChanges();
    this.blur.next(this.currentNumber);
  }
}
