import { Component, OnDestroy, OnInit } from '@angular/core';
import { MatTableDataSource } from '@angular/material/table';
import { Subscription } from 'rxjs';
import { Book } from './models/book';
import { Page } from './models/page';
import { BookService } from './services/book.service';

interface TableData {
  isbn: string;
  name: string;
  authors: string;
  year: string;
  pages: number;
}

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit, OnDestroy {
  private subs = new Subscription();

  displayedColumns = [
    'isbn',
    'name',
    'authors',
    'year',
    'pages'
  ];
  dataSource = new MatTableDataSource<TableData>();

  constructor(
    private service: BookService,
  ) { }

  ngOnInit() {

    this.subs.add(
      this.service.findbyPage(0, 5).subscribe((page: Page<Book>) => {
        this.dataSource.data = this.toTableData(page.content);
      })
    );
  }

  private toTableData(books: Book[]): TableData[] {
    return books.map(b => {
      return {
        isbn: b.isbn,
        name: b.name,
        authors: b.authorName,
        year: b.year,
        pages: b.totalPage,
      };
    });
  }

  ngOnDestroy() {
    this.subs.unsubscribe();
  }
}