import { ChangeDetectorRef, Component, Input, OnInit } from '@angular/core'; // , ChangeDetectionStrategy, EventEmitter,  Output, ViewChild
import { Pipe, PipeTransform } from '@angular/core';
import { Observable, Subscription } from 'rxjs/Rx';
// import 'rxjs/add/operator/debounceTime';

import 'rxjs/add/operator/distinctUntilChanged';

import 'rxjs/add/operator/throttleTime';
// import 'rxjs/add/observable/fromEvent';
// import { FormsModule, ReactiveFormsModule } from '@angular/forms';

import { FormControl, FormGroup } from '@angular/forms';

// import { ControlValueAccessor } from '@angular/forms';

/*
@Pipe({
    name: 'ldiFilter'
})
export class FilterPipe implements PipeTransform {
    transform(items: any, filter: any): any {
      if (filter && Array.isArray(items)) {
          let filterKeys = Object.keys(filter);
          return items.filter(item =>
              filterKeys.reduce((memo, keyName) =>
                  (memo && new RegExp(filter[keyName], 'gi').test(item[keyName])) || filter[keyName] === "", true));
      } else {
          return items;
      }
    }
}
*/

@Component({
    selector: 'knk-knok-item-option',
    templateUrl: './knokitemoption.component.html',
    styleUrls: ['./knokitemoption.component.scss']
})

export class KnokItemOptionComponent implements OnInit {
    @Input() items: Observable<Array<{ label: string, value: string }>>;
    public _items: Array<{ label: string, value: string }>;
  public _selectedItems: Array<{ label: string, value: string, checked: boolean }>;
  public isOpen: boolean = false;
  public enableFilter: boolean;
  public header: string = 'Select some stuff';
  public filterText: string;
  public filterPlaceholder: string;
  public filterInput = new FormControl();
  private _subscription: Subscription;

  // ControlValueAccessor Intercace and mutator
  // propagateChange = (_: any) => {};

  get selectedItems(): Array<{ label: string, value: string }> {
      return this._selectedItems;
  }

  // writeValue(value: string) {
  // if (value !== undefined) {
  //    this._selectedItems = value;
  //  } else  {
  //    this._selectedItems = [];
  //  }
  // }

  // registerOnChange(fn: any) {
  //  this.propagateChange = fn;
  // }

  // registerOnTouched(fn: any) : void

  constructor(private changeDetectorRef: ChangeDetectorRef) {
  }

  select(item: { label: string, value: string, checked: boolean }): void {
    item.checked = !item.checked;
  }

  toggleSelect(): void {
    this.isOpen = !this.isOpen;
  }

  clearFilter(): void {
    this.filterText = '';
  }

  ngOnInit(): void {
    // this._subscription = this.items.subscribe(res => this._items = res);
    // this.enableFilter = true;
    // this.filterText = '';
    // this.filterPlaceholder = 'Filter..';

    this.filterInput
      .valueChanges
      .debounceTime(200)
      .distinctUntilChanged()
      .subscribe(term => {
        this.filterText = term;
        this.changeDetectorRef.markForCheck();
        console.log(term);
      });
  }
}
