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(() => InputSelect) }

export type ViewModes = "text" | "number";

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

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

  @Output("rd-itemSelect") itemSelectEvent: EventEmitter<any> = new EventEmitter<any>();
  @Output("rd-keyUp") onKeyUp: EventEmitter<any> = new EventEmitter<any>();

  @Input("rd-mode") mode: ViewModes = 'text';
  @Input("rd-warning-text") warningText: string;
  @Input("rd-placeholder") placeholder: string = '';
  @Input("rd-default") default: any;
  @Input("rd-disabled") disabled: boolean;
  @Input("rd-readOnly") readOnly: boolean;
  @Input("rd-required") required: boolean;
  @Input("rd-height") height: number | string = "26";
  @Input("rd-grouped") grouped: boolean = false;
  @Input("rd-group-templateFn") groupTemplateFn: Function;
  @Input("rd-min-search-length") minLength: number = 0;
  @Input("rd-img-template") imgTemplate: boolean = false;
  @Input("rd-onInitialized-focus") onInitializedFocus: boolean = false;
  @Input("rd-onInitialized-reset") onInitializedReset: boolean = false;

  @Input("rd-items") items: Array<object>;
  @Input("rd-display") displayExpr: string = "text";
  @Input("rd-value") valueExpr: string = "id";

  private internalItems: Array<object> = [];

  ngOnInit() {
    if (!this.grouped) this.updateInternalItems();
    this.checkDefault();

    this.container = this.jQuery(this.element.nativeElement).find("#dxElement");
    this.container.dxSelectBox({
      onValueChanged: (e) => {
        if (e.value == null || e.value == undefined) this.dxElement.option('value', null);
        this.onChange(e.value);
      },
      onKeyUp: (e) => {
        if (e.jQueryEvent.key == 'ArrowDown' || e.jQueryEvent.key == 'ArrowUp' || e.jQueryEvent.key == 'Enter') return

        let text = this.dxElement.option('text');
        if (text && text.length >= this.minLength) this.onKeyUp.emit(text);
      },
      onInitialized: (e) => {
        setTimeout(() => {
          if (this.onInitializedFocus) e.component.focus();
          if (this.onInitializedReset) e.component.reset();
        });
      },
      onItemClick: (e) => {
        this.itemSelectEvent.emit(e.itemData);
      },
      onOptionChanged: (e) => {
        if (this.grouped && e.name == "dataSource") this.jQuery(".dx-overlay-content").css("opacity", 0)
      },
      itemTemplate: (itemData, itemIndex, itemElement) => {
        return this.jQuery("<span></span>").text(itemData[this.displayExpr]).attr("title", itemData[this.displayExpr]);
      },
      value: this.model,
      // mode: this.mode,
      disabled: this.disabled,
      readOnly: this.readOnly,
      searchEnabled: true,
      showClearButton: !this.required,
      noDataText: RdLib.localization.translateEn("No item to show"),
      placeholder: this.placeholder,
      grouped: this.grouped,
      dataSource: this.internalItems,
      displayExpr: this.displayExpr,
      valueExpr: this.valueExpr,
      groupTemplate: this.groupTemplateFn
    });

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

  ngOnChanges(changes) {
    if (!this.dxElement) return;

    if (changes.required) {
      this.dxElement.option('showClearButton', !this.required);
      this.updateValidator();
    }

    if (changes.items) {
      if (this.grouped) {
        this.dxElement.option('dataSource', this.items);
        let groupedItems = this.dxElement.option('items');

        this.window["mApp"].block(this.jQuery(".dx-overlay-content"), { overlayColor: "#000000", type: "loader", state: "success", size: "lg" });

        setTimeout(function () {
          this.dxElement.option("items", groupedItems);
          this.dxElement.open();
          if (!this.onInitializedReset) this.dxElement.close();
          this.jQuery(".dx-overlay-content").css("opacity", 1);
          this.window.mApp.unblock(this.jQuery(".dx-overlay-content"));
        }.bind(this), 500);
      }
      else {
        this.updateInternalItems();
        this.dxElement.option('dataSource', this.internalItems);

        if (this.imgTemplate) {
          this.height = "35";
          let defaultOpt = this.dxElement.option();

          this.container.dxSelectBox({
            ...defaultOpt,
            fieldTemplate: (e, container) => {
              let field = this.jQuery("<div class='devex-select-box-custom-field'><img src='" + (e ? e.imgSrc : './assets/common/question.png') + "' /><div class='devex-select-box-custom-item'></div></div>");
              field.find(".devex-select-box-custom-item").dxTextBox({
                value: e ? e[this.displayExpr] : null,
                readOnly: false
              });
              container.append(field);
            },
            itemTemplate: (e) => {
              return "<div class='devex-select-box-custom-field'><img src='" + e.imgSrc + "' /><div class='devex-select-box-custom-item' style='font-size:10px;'>" + e[this.displayExpr] + "</div></div>";
            }
          });
        }
      }
    }

    if (changes.model) {
      this.dxElement.option('value', (this.mode == 'number' && this.model) ? this.model.toString() : this.model);
    }

    if (changes.disabled) this.dxElement.option('disabled', this.disabled);
    if (changes.readOnly) this.dxElement.option('readOnly', this.readOnly);
  }

  updateInternalItems() {
    if (typeof this.items === "string") {
      try { this.items = JSON.parse(this.items); }
      catch (error) { this.error("not valid json: 'rd-series'"); return; }
    }

    if (this.items && this.items.length) this.internalItems = this.items;
    else this.internalItems = [];
  }
}