import {Component,OnInit} from '@angular/core';
import { Hero } from './hero';
import { Observable } from 'rxjs';
import { SelectDoc4Service } from './select-doc-4.service';
import { HEROES } from './virtual-hero';

@Component({
	selector: 'cm-select-doc-4',
	templateUrl: './select-doc-4.component.html',
	styleUrls: ['./select-doc-4.component.css'],
	providers: [SelectDoc4Service]
})

export class SelectDoc4Component implements OnInit {
	selectedOption: any;
	searchOptions: any = [];
	heroes: Hero[];
  	selectedHero: Hero;

	constructor(private selectService: SelectDoc4Service) { }
	searchChange(searchText: any) {
		let data$ = Observable.create((observer:any) => {
			observer.next(HEROES);
		}).throttleTime(1000).map((heroes:any) => {
			return heroes.filter((item:any) => {
				return new RegExp(searchText, 'gi').test(item.label)
			});
		}).delay(2000);
		data$.subscribe((result:any) => {
			  this.searchOptions = result;
		});	
	}
	ngOnInit() {
		this.selectService.getHeroes().then(heroes => this.heroes = heroes);
	}
	 onSelect(hero: Hero): void {
    this.selectedHero = hero;
  }

};