import { Component, Input, Output, EventEmitter, ElementRef, forwardRef, ExistingProvider, OnInit, OnChanges, AfterViewInit } from '@angular/core';
import { InputBase } from './inputBase';

const provider: ExistingProvider = { provide: InputBase, useExisting: forwardRef(() => InputNumber) }

@Component({
  selector: "rd-input-number",
  template: `
    <div id="dxElement" [style.height.px]="height"></div>
  `,
  providers: [provider]
})
export class InputNumber extends InputBase implements OnInit, OnChanges, AfterViewInit {
  constructor(private element: ElementRef) { super(); }

  @Input("rd-model") model: number;
  @Output("rd-modelChange") modelChange: EventEmitter<number> = new EventEmitter<number>();
  @Output("rd-change") changeEvent: EventEmitter<number> = new EventEmitter<number>();
  @Output("rd-keyUp") onKeyUp: EventEmitter<any> = new EventEmitter<any>();
  @Output("rd-onEnter") onEnter: EventEmitter<any> = new EventEmitter<any>();
  @Output("rd-paste") onPaste: EventEmitter<any> = new EventEmitter<any>();

  @Input("rd-warning-text") warningText: string;
  @Input("rd-default") default: number;
  @Input("rd-disabled") disabled: boolean;
  @Input("rd-readOnly") readOnly: boolean;
  @Input("rd-required") required: boolean;
  @Input("rd-placeholder") placeholder: string = '';
  @Input("rd-height") height: number | string = "26";
  @Input("rd-show-spinner") showSpinner: boolean = true;
  @Input("rd-tab-index") tabIndex: number = 0;
  @Input("rd-style") style = {};
  @Input("rd-format") format = "";
  @Input("rd-onInitialized-focus") onInitializedFocus: boolean = false;

  @Input("rd-min") min: number;
  @Input("rd-max") max: number;
  @Input("rd-decimal-digit-count") decimalDigitCount: number = 0;

  ngOnInit() {
    this.checkDefault();
    this.container = this.jQuery(this.element.nativeElement).find("#dxElement");

    this.container.dxNumberBox({
      onInitialized: (e) => {
        setTimeout(() => {
          if (this.onInitializedFocus) e.component.focus();
        }, 1000);
      },
      onValueChanged: (e) => {
        this.onChange(this.controlValue(e.value));
      },
      onKeyUp: (e) => {
        this.onKeyUp.emit(this.dxElement.option('text'));
      },
      onPaste: (e) => {
        setTimeout(() => {
          this.onPaste.emit(e.component.option('text'));
        }, 100);
      },
      onEnterKey: (e) => {
        if (this.isValid()) this.onEnter.emit(this.dxElement.option('text'));
      },
      value: this.model,
      disabled: this.disabled,
      readOnly: this.readOnly,
      placeholder: this.placeholder,
      showSpinButtons: this.showSpinner,
      tabIndex: this.tabIndex,
      format: this.format,
      min: this.min || undefined,
      max: this.max || undefined
    });

    this.dxElement = this.container.dxNumberBox('instance');
  }

  ngOnChanges(changes) {
    if (!this.dxElement) return;
    if (changes.required) this.updateValidator();
    if (changes.model) this.dxElement.option('value', this.model);
    if (changes.disabled) this.dxElement.option('disabled', this.disabled);
    if (changes.readOnly) this.dxElement.option('readOnly', this.readOnly);
    if (changes.min) this.dxElement.option('min', this.min);
    if (changes.max) this.dxElement.option('max', this.max);
    if (changes.showSpinner) this.dxElement.option('showSpinButtons', this.showSpinner);
    if (changes.style) this.jQuery(this.container).find("input").css(this.style);
  }

  ngAfterViewInit() {
    this.jQuery(this.container).find("input").css(this.style);
  }

  private controlValue(value) {
    if (isNaN(value) || value == null || value == undefined) return;

    var finalValue = Number(value);
    if (this.min != undefined && finalValue < this.min) finalValue = Number(this.min);
    if (this.max != undefined && finalValue > this.max) finalValue = Number(this.max);
    finalValue = Number(finalValue.toFixed(this.decimalDigitCount));

    return finalValue;
  }
}