import { Field } from '../../../models/Field';
import { Component, OnInit, Input, Output, EventEmitter, forwardRef, ViewEncapsulation } from '@angular/core';
import { ControlValueAccessor, FormControl, FormGroup, NG_VALUE_ACCESSOR, Validators } from '@angular/forms';

import { ServerService } from '../../../services/server.service';
import { UUID } from 'angular2-uuid';
import { NguiAutoCompleteModule } from '@ngui/auto-complete';

declare var $: any;


@Component({
  selector: 'df-autocomplete',
  templateUrl: './autocomplete-remote.component.html',
  styleUrls: ['./autocomplete-remote.component.css'],
  encapsulation: ViewEncapsulation.None
})



export class AutocompleteRemoteComponent implements OnInit/* , ControlValueAccessor */ {


  @Input() field: Field;
  @Input() form: FormGroup;

  private textFormGroup = new FormGroup({ text: new FormControl("") });
  private loading: boolean;
  values: any[] = new Array();
  typeaheadMS: number = 1400;

  constructor(private serverService: ServerService) {

  }


  ngOnInit() {
    let valueChanges = this.textFormGroup.controls['text'].valueChanges.share();
    valueChanges.subscribe(searchTerm => {
      this.loading = true;
      if (this.form.controls['text'].value)
        this.resetFormGroupValue();
    });

    valueChanges
      .debounceTime(this.typeaheadMS)
      .subscribe(searchTerm => {
        if (typeof searchTerm === 'string') {
          this.updateByQuery(searchTerm)
        }
      });


  }


  resetFormGroupValue() {
    this.form.patchValue({ value: null }, { emitEvent: false });
  }


  updateByQuery(query: string) {
    this.serverService.getThroughProxy(this.field.data.url, query).subscribe(
      response => {
        this.values.length = 0;
        /* response.data.forEach(element => {
          this.values.push(element.attributes.name);
        }); */
      },
      error => {
        console.log(error);
      }
    );
  }


  onChange: any = () => { };
  onTouched: any = () => { };


  registerOnChange(fn) {
    this.onChange = fn;
  }

  registerOnTouched(fn) {
    this.onTouched = fn;
  }

  /* writeValue(value) {
    if (value) {
      this.value = value;
    }
  } */

}