import { Component, OnInit } from '@angular/core';
import { Router }            from '@angular/router';
import { Observable }        from 'rxjs/Observable';
import { Subject }           from 'rxjs/Subject';

import { SearchService } from './search.service';
import { Data } from './datatypings';

@Component({
  moduleId: module.id,
  selector: 'casino-search',
  templateUrl: 'search.component.html',
  styleUrls: [ 'search.component.css' ],
  providers: [SearchService]
})

export class SearchComponent implements OnInit {

  data: Observable<Data[]>;

  private searchTerms = new Subject<String>();

  constructor(
    private searchService: SearchService,
    private router: Router) {}
  // Push a search term into the observable stream
  search(term: string): void {
    this.searchTerms.next(term);
  }

  ngOnInit(): void {
    this.data = this.searchTerms
      .debounceTime(150)        // wait for 150ms pause in events
      .distinctUntilChanged()   // ignore if next search term is same as previous
      .switchMap(term => term   // switch to new observable each time
        // return the http search observable
        ? this.searchService.search(term)
        // or the observable of empty data if no search term
        : Observable.of<Data[]>([]))
          .catch(error => {
        // TODO: real error handling
        console.log(error);
        return Observable.of<Data[]>([]);
      });
  }

  gotoDetail(data: Data): void {
    let link = ['/detail', data.id];
    this.router.navigate(link);
  }
}

app/data/search.component.ts(37,37): error TS2345: Argument of type 'String' is not assignable to parameter of type 'string'.
  'string' is a primitive, but 'String' is a wrapper object. Prefer using 'string' when possible.