import { Component, OnInit} from '@angular/core';
import { Http,Response } from '@angular/http';
import { Subject,Observable,Subscription   } from 'rxjs';
import "rxjs/add/operator/debounceTime";
import "rxjs/add/operator/distinctUntilChanged";
import "rxjs/add/operator/mergeMap";


@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {


  results;
  q = '';
  subscription;

  searchTextChanged = new Subject<string>();
  constructor(private http:Http) {
  
  }
  
  
  ngOnInit(): void {
      this.subscription = this.searchTextChanged
          .debounceTime(1000)
          .distinctUntilChanged()
          .mergeMap(search => this.getValues(search))
          .subscribe(() => { });
  }
  
  getValues() {
      this.http.get("https://www.example.com/search/?q="+this.q)
      .subscribe(
        (res:Response) => {
            const studentResult = res.json();
            console.log(studentResult);
            if(studentResult.success) {
              this.results = studentResult.data;
            } else {
              this.results = [];
            }
        }
      )
  }
  
  search($event) {
      this.searchTextChanged.next($event.target.value);
  }
}