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

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

export interface IElementAttr {
  id: string;
  class: string;
}

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

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

  @Input("rd-warning-text") warningText: string;
  @Input("rd-default") default: string;
  @Input("rd-disabled") disabled: boolean;
  @Input("rd-readOnly") readOnly: boolean;
  @Input("rd-required") required: boolean;
  @Input("rd-height") height: number | string = "70";
  @Input("rd-elementAttr") elementAttr: Object = {};

  ngOnInit() {
    this.checkDefault();
    this.container = this.jQuery(this.element.nativeElement).find("#dxElement");
    this.container.dxTextArea({
      onChange: (e) => {
        if (this.dxElement.hasOwnProperty("_value")) this.onChange(this.dxElement._value);
        else this.onChange(e.component._options.value);
      },
      onKeyUp: (e) => {
        this.onKeyUp.emit(this.dxElement.option('text'));
      },
      value: this.model,
      readOnly: this.readOnly,
      elementAttr: this.elementAttr
    });
    this.dxElement = this.container.dxTextArea('instance');
    if (this.dxElement.hasOwnProperty("_value")) this.model = this.dxElement._value;
    //this.updateValidator();
  }

  ngOnChanges(changes) {
    this.checkDevExpressChange();

    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);
  }

  private checkDevExpressChange() {
    setTimeout(() => {
      if (this.dxElement.hasOwnProperty("_value") && this.model != this.dxElement._value) {
        this.onChange(this.dxElement._value);
      }
    });
  };
}