import { Component, OnInit, ChangeDetectionStrategy, Output, EventEmitter, Input, HostListener, ElementRef, forwardRef, OnChanges, SimpleChanges } from '@angular/core';
import { ControlValueAccessor, FormBuilder, FormGroup, NG_VALUE_ACCESSOR, Validators } from '@angular/forms';

@Component({
  selector: 'shared-autocomplete',
  templateUrl: './autocomplete.component.html',
  styleUrls: ['./autocomplete.component.scss'],
  providers: [{
    provide: NG_VALUE_ACCESSOR,
    multi: true,
    useExisting: forwardRef(() => AutocompleteComponent)
  }],
  // changeDetection: ChangeDetectionStrategy.OnPush
})
export class AutocompleteComponent implements OnChanges, ControlValueAccessor {
  @Output() blur: EventEmitter<any> = new EventEmitter();
  @Output() change: EventEmitter<any> = new EventEmitter();
  @Output() onKeyup: EventEmitter<any> = new EventEmitter();
  @Output() onSelect: EventEmitter<any> = new EventEmitter();
  @Output() onClickClose: EventEmitter<any> = new EventEmitter();
  @Input() placeholder: string = '';
  @Input() img: boolean = true;
  @Input() iconDelete: boolean = true;
  @Input() dataSource: any[] = [];
  @Input() options;
  showList: boolean = false;
  regionList;
  onChange: (_: any) => void;
  onTouched: () => void;

  form: FormGroup = this._formBuilder.group({
    searchAutoComplete: ['', [Validators.required]]
  })

  get value() { return this.form.get('searchAutoComplete').value }
  set value(e: string) { this.form.get('searchAutoComplete').setValue(e) }


  selectedList: any;
  @HostListener('document:click', ['$event'])
  clickout(event) {
    if (!this.elemetRef.nativeElement.contains(event.target)) {
      this.showList = false;
    }
  }
  constructor(
    public elemetRef: ElementRef,
    private _formBuilder: FormBuilder,
  ) { }

  ngOnChanges(changes: SimpleChanges): void { }

  writeValue(value): void {
    this.selectedList = value;
  }

  registerOnChange(fn: any): void {
    this.onChange = fn;
  }

  registerOnTouched(fn: any): void {
    this.onTouched = fn;
  }

  blurHandler(e: any) {
    this.blur.emit(e.target.value)
  }

  selectList(e) {
    this.selectedList = e.name;
    this.onSelect.emit(e);
    this.showList = false;
  }

  keyupHandler(event) {
    this.onKeyup.emit(event.target.value);
  }

  showListDropdown() {
    this.showList = true;
  }


  filter(e) {
    let query = e.target.value.toLowerCase();
    let filtered = this.options.filter(
      item => item.name
        .toLowerCase()
        .indexOf(query) >= 0
    );

    this.dataSource = filtered;
  }

  deleteValue(e) {
    console.log(e);
    this.value = '';
    this.onClickClose.emit(e);
    this.onChange(this.value)
  }



}