import { Component, OnInit, ViewChild } from '@angular/core';
import { ActivatedRoute, Params } from '@angular/router';

import { ElsService } from '../els.service';
import { SongTableComponent } from '../song-table/song-table.component';

import { Song } from '../model/song';

@Component({
  selector: 'app-genre',
  templateUrl: './genre.component.html',
  styleUrls: ['./genre.component.css']
})
export class GenreComponent implements OnInit {
  @ViewChild(SongTableComponent) songtable: SongTableComponent;
  genreName = '';
  songs: Array<Song> = [];

  constructor(
    private elsService: ElsService,
    private route: ActivatedRoute
  ) { }

  ngOnInit() {
    this.route.params
      .subscribe((params: Params) => this.genreName = params['name']);

    this.loadSongs();
  }

  loadSongs(): any {
    this.elsService.getGenreSongs(this.genreName, this.songs.length).subscribe(
      data => {
        // this.moreDataAvailable = data.length === ElsService.DEFAULT_SIZE;

        // Erase song array with result for first load, then add elements one by one
        // instead use concat => concat will sort table at each load, very consuming! and not user friendly
        if (this.songs.length === 0) {
          this.songs = data;
        } else {
          data.forEach(song => {
            this.songtable.setSortable(true);
            this.songs.push(song);
          });
        }
      }
    );
  }

}