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

import { ElsService } from './../els.service';
import { Song } from './../object/song';
import { Artist } from './../object/artist';

import { SortByPipe } from './../sort-by.pipe';

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

export class ArtistComponent implements OnInit {
  artistName = '';
  songs: Array<Song> = [];
  artist: Artist = new Artist();
  // To activate button in interface var
  moreDataAvailable = false;
  atBottom = false;
  sortable = false;

  lockLoadData = false;

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

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

    this.elsService.getArtist(this.artistName).subscribe(data => this.artist = data);
    this.loadSongs();
  }

  // TODO Duplicate code!
  loadSongs(): void {
    if (this.lockLoadData) {
      console.log('Loading data locked');
      return;
    }

    this.lockLoadData = true;
    this.elsService.getArtistSongs(this.artistName, 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 {
          this.sortable = true;
          data.forEach(song => {
            this.songs.push(song);
          });
        }
        console.log('Unlock load data');
        this.lockLoadData = false;
      }
    );
  }

  scrollTop(): void {
    window.scrollTo(0, 0);
  }

  /**
   * Handle scroll:
   * - load data if at bottom of screen (if needed)
   * - hide/show "go to top" button
   *
   * @param event scroll event
   */
  onScroll(event: any) {
    if (this.moreDataAvailable &&
          (window.innerHeight + window.scrollY) >= document.body.offsetHeight) {
        this.loadSongs();
    }

    if (window.scrollY > window.innerHeight) {
      this.atBottom = true;
    }

    if (window.scrollY === 0) {
      this.atBottom = false;
    }
  }

  sort(): void {
    this.songs = new SortByPipe().transform(this.songs, 'Year', 'Album', 'Track Number', 'Play Count');
    this.sortable = false;
  }
}