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

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

@Component({
  selector: "rd-input-search",
  template: `
    <div style="display: flex;">
      <div id="dxElement" style="flex-grow: 1;" [style.height.px]="height"></div>
      <div style="width: 28px;">
        <button type="button" rd-search-button [attr.disabled]="disabled ? true : null" (click)="onEnter(model)" [style.height.px]="height">
          <i class="fas fa-share"></i>
        </button>
      </div>
    </div>
  `,
  providers: [provider]
})
export class InputSearch 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-enter") enterEvent: EventEmitter<string> = new EventEmitter<string>();
  @Output("rd-onClear") onClear: EventEmitter<boolean> = new EventEmitter<boolean>();

  @Input("rd-warning-text") warningText: string = RdLib.localization.translateEn('Can Not Call Empty Search');
  @Input("rd-default") default: string;
  @Input("rd-placeholder") placeholder: string = '';
  @Input("rd-disabled") disabled: boolean;
  @Input("rd-required") required: boolean;
  @Input("rd-min-search-length") minLength: number = 0;
  @Input("rd-onInitialized-focus") onInitializedFocus: boolean = false;
  @Input("rd-height") height: number | string = "27";

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

    this.container.dxTextBox({
      onChange: (e) => {
        if (this.dxElement.hasOwnProperty("_value")) this.onChange(this.dxElement._value);
        else this.onChange(e.component._options.value);
      },
      onKeyDown: (event) => {
        if (event.jQueryEvent.keyCode === 13) {
          setTimeout(() => {
            if (this.dxElement.hasOwnProperty("_value")) this.onEnter(this.dxElement._value);
            else this.onEnter(this.dxElement._options.value);
          });
        }
      },
      onValueChanged: (e) => {
        if (!this.dxElement.option('text')) {
          this.onClear.emit(true);
          this.onChange(null);
        }
      },
      onInitialized: (e) => {
        setTimeout(() => {
          if (this.onInitializedFocus) e.component.focus();
        });
      },
      mode: 'search',
      value: this.model,
      disabled: this.disabled,
      placeholder: this.placeholder
    });
    this.dxElement = this.container.dxTextBox('instance');
    if (this.dxElement.hasOwnProperty("_value")) this.model = this.dxElement._value;
    //this.updateValidator();
  }

  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.placeholder) this.dxElement.option('placeholder', this.placeholder);
  }

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

  public onEnter(value) {
    if (this.isValid()) this.enterEvent.emit(value);
  }
}