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

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

export type InputModes = 'text' | 'password' | 'email';

/**
 * masking Element
 * 
 * 0 -> digit
 * 9 -> digit or space
 * # -> digit, space, "+" or "-"
 * L -> literal
 * C -> Any character except space
 * c -> Any character
 * A -> An alphanumeric
 * a -> An alphanumeric or a space.
 * 
 * To escape the masking elements, use the double backslash character (\). For example, "000.\\0\\0".
 */

@Component({
  selector: "rd-input-text",
  template: `
    <div id="dxElement" [style.height.px]="height"></div>
  `,
  providers: [provider]
})
export class InputText 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-onClear") onClear: EventEmitter<boolean> = new EventEmitter<boolean>();
  @Output("rd-keyUp") onKeyUp: EventEmitter<any> = new EventEmitter<any>();
  @Output("rd-onEnter") onEnter: EventEmitter<any> = new EventEmitter<any>();

  @Input("rd-mode") mode: InputModes = 'text';
  @Input("rd-warning-text") warningText: string;
  @Input("rd-default") default: string;
  @Input("rd-readOnly") readOnly: boolean;
  @Input("rd-placeholder") placeholder: string = '';
  @Input("rd-disabled") disabled: boolean;
  @Input("rd-required") required: boolean;
  @Input("rd-height") height: number | string = "26";
  @Input("rd-font-size") fontSize: number | string;
  @Input("rd-min-search-length") minLength: number = 0;
  @Input("rd-onInitialized-focus") onInitializedFocus: boolean = false;
  @Input("rd-mask") mask: string;

  ngOnInit() {
    this.checkDefault();
    this.container = this.jQuery(this.element.nativeElement).find("#dxElement");
    this.container.dxTextBox({
      onInitialized: (e) => {
        setTimeout(() => {
          if (this.onInitializedFocus) e.component.focus();
        }, 1000);
      },
      onChange: (e) => {
        if (this.dxElement.hasOwnProperty("_value")) this.onChange(this.dxElement._value);
        else this.onChange(e.component._options.value);
      },
      onValueChanged: (e) => {
        if (!this.dxElement.option('text')) {
          this.onClear.emit(true);
          this.onChange(null);
        }
      },
      onKeyUp: (e) => {
        this.onKeyUp.emit(this.dxElement.option('text'));
      },
      onEnterKey: (e) => {
        if (this.isValid()) this.onEnter.emit(this.dxElement.option('text'));
      },
      mode: this.mode,
      value: this.model,
      disabled: this.disabled,
      mask: this.mask,
      readOnly: this.readOnly,
      placeholder: this.placeholder
    });
    this.dxElement = this.container.dxTextBox('instance');

    if (this.dxElement.hasOwnProperty("_value")) this.model = this.dxElement._value;
    if (this.fontSize) {
      this.jQuery(this.element.nativeElement).find(".dx-texteditor-container,.dx-placeholder").css({ "font-size": this.fontSize })
    }
  }

  ngOnChanges(changes) {
    this.checkDevExpressChange();

    if (!this.dxElement) return;
    if (changes.required || changes.minLength) 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.mask) this.dxElement.option('mask', this.mask);
    if (changes.default) {
      this.model = this.default;
      this.dxElement.option('value', this.model);
    }
    if (this.mode == "password") {
      this.dxElement.option("elementAttr", { 'autocomplete': 'off' });
    }
  }

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