import { Component } from '@angular/core';
import { Subject, takeUntil } from 'rxjs';
import { Book, GoogleBookApiService } from '../../api/google-book-api.service';

@Component({
  selector: 'app-search-page',
  templateUrl: 'search.page.html',
  styleUrls: ['search.page.scss'],
})
export class SearchPage {
  constructor(private api: GoogleBookApiService) {}

  public searchResult: Array<Book> = [];

  private destroy$: Subject<boolean> = new Subject<boolean>();

  public search(e: any) {
    this.destroy$.next(true);
    this.api
      .search(e.target.value)
      .pipe(takeUntil(this.destroy$))
      .subscribe({
        next: (res) => {
          console.log(res);
          this.searchResult = res.items;
        },
        error: (error) => {
          console.log(error);
        },
      });
  }
}