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

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

@Component({
  selector: "rd-input-tag",
  template: `
    <div id="dxElement" style="height:26px"></div>
    <span style="color:#337ab7">{{placeholder}} : {{remainingItem}}</span>
  `,
  styles: [".dx-checkbox-container{display:inline !important} "],
  encapsulation: ViewEncapsulation.None,
  providers: [provider]
})
export class InputTag 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>();

  @Input("rd-max-size") maxSize: number = 500;
  @Input("rd-warning-text") warningText: string;
  @Input("rd-readOnly") readOnly: boolean;
  @Input("rd-disabled") disabled: boolean;
  @Input("rd-required") required: boolean;

  remainingItem: number = this.maxSize;
  placeholder: string = RdLib.localization.translateEn("Remaining Item Count");

  ngOnInit() {
    var initValue = [];
    if (this.model) {
      initValue = this.model.split('|');
      this.remainingItem = this.maxSize - initValue.length;
    }

    this.container = this.jQuery(this.element.nativeElement).find("#dxElement");
    this.container.dxTagBox({
      onCustomItemCreating: function (e) {
        var component = e.component,
          currentItems = RdLib.objectOperations.deepCopy(component.option("items"));

        var newValues = [];
        if (e.text.indexOf(",") != -1) newValues = e.text.replace(/ /g, '').split(',');
        else if (e.text.indexOf("|") != -1) newValues = e.text.replace(/ /g, '').split('|');
        else if (e.text.indexOf(" ") != -1) newValues = e.text.split(' ');
        else newValues.push(e.text);

        if (this.remainingItem > 0 && this.remainingItem >= newValues.length) {
          for (let t of newValues) {
            if (t.trim()) {
              currentItems.unshift(t);
              this.remainingItem--;
            }
          }

          component.option("items", currentItems);
          component.option("value", currentItems);
        }
        else RdLib.screenOperations.toastr.warning(RdLib.localization.translateEn('You Exceeded MaxSize'));
        return currentItems;
      }.bind(this),
      onValueChanged: function (e) {
        if (!e.value.length) e.component.option("items", []); // for onClearButton

        for (let i in e.value) {
          if (typeof e.value[i] != "string") {
            e.value.splice(i, 1);
            e.component.option("value", e.value);
          }
        }

        this.remainingItem = e.value.length ? this.maxSize - e.value.length : this.maxSize;
        this.model = this.splitWithPipe(e.value);
        this.onChange(this.model);

      }.bind(this),
      value: initValue,
      items: initValue,
      searchEnabled: true,
      acceptCustomValue: true,
      multiline: false,
      showClearButton: true,
      showSelectionControls: true,
      disabled: this.disabled,
      readOnly: this.readOnly,
      placeholder: '',
    })

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

  ngOnChanges(changes) {
    if (!this.dxElement) return;
    if (changes.required) this.updateValidator();
    if (changes.disabled) this.dxElement.option('disabled', this.disabled);
    if (changes.readOnly) this.dxElement.option('readOnly', this.readOnly);
    if (changes.model && typeof changes.model.currentValue == 'string' && changes.model.currentValue != this.model)
      this.dxElement.option('value', this.model.split('|'));
  }

  private splitWithPipe(values) {
    let strValue = '';
    for (let v of values)
      if (typeof v == 'string') strValue += v + '|';
    return strValue.substring(0, strValue.length - 1);
  }
}