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

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

@Component({
  selector: 'app-album',
  templateUrl: './album.component.html',
  styleUrls: [ './album.component.css', './../dashboard/dashboard.component.css' ]
})

export class AlbumComponent implements OnInit {
  @ViewChild(SongTableComponent) private songtable: SongTableComponent;

  albumName = '';
  songs: Array<Song> = [];
  album: Album = new Album(); // If album not found, will be replaced by 'undefined'
  toSort: boolean = false; // Show only song to sort

  // Prevent useless data load + activate button in interface var
  moreDataAvailable = true;
  lockLoadData = false;

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

  ngOnInit(): void {
    this.route.params.subscribe((params: Params) => this.albumName = params['name']);
    this.route.queryParams.subscribe(params => { this.toSort = params.tosort ?? false; });

    this.loadSongs();

    this.elsService.getAlbum(this.albumName).subscribe(data => this.album = data);
  }

  loadSongs(): void {
    if (this.lockLoadData) {
      console.log('Loading data locked');
      return;
    }

    if (!this.moreDataAvailable) {
      return;
    }

    this.lockLoadData = true;
    this.elsService.getAlbumSongs(this.albumName, this.songs.length, this.toSort).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 {
          this.songtable.setSortable(true);
          data.forEach(song => {
            this.songs.push(song);
          });
        }
        console.log('Unlock load data');
        this.lockLoadData = false;
      }
    );
  }
}