import { Component } from '@angular/core';
import { Router } from '@angular/router';
import { BookService } from '../services/book.service';

@Component({
  selector: 'app-tab1',
  templateUrl: 'tab1.page.html',
  styleUrls: ['tab1.page.scss']
})
export class Tab1Page {
  books: any[] = [];
  searchQuery: string = '';
  selectedType: string = '';
  bookTypes: string[] = [];
  sortByBorrowTimes: boolean = false;
  constructor(
    private router: Router,
    private bookService: BookService
  ) {}
  ngOnInit() {
    this.fetchBooks();
  }

  async fetchBooks() {
    const queryParams = {
      title: this.searchQuery,
      type: this.selectedType,
      sortByBorrowTimes: this.sortByBorrowTimes
    };
    this.books = await this.bookService.getBooks(queryParams);
  }

  onClickTab3(event:MouseEvent){
    this.router.navigate(['/tabs/tab3']);//  /tabs/tab3
  }
  onClickUser(event:MouseEvent){
    this.router.navigate(['/tabs/mine']);
  }
  onClickTab2(event:MouseEvent){
    this.router.navigate(['/tabs/tab2']);
  }
  onClickBorrow(event:MouseEvent){
    this.router.navigate(['borrow']);
  }
  onClickBook(event: MouseEvent, i: number): void {
    let book = this.books[i];
    let path = "details-book/" + book.id;
    this.router.navigate([path]);
  }

}
