import { Component, EventEmitter, Input, Output } from '@angular/core';
import { Utils } from '../utils';

import { Song } from './../model/song';
import { SortByPipe } from './../pipes/sort-by.pipe';

@Component({
  selector: 'app-song-table',
  templateUrl: './song-table.component.html',
  styleUrls: ['./song-table.component.css']
})
export class SongTableComponent {
  numberToArray = Utils.numberToArray;
  @Input() songs: Array<Song> = [];
  @Output() private atBottom = new EventEmitter();

  // To activate button in interface var
  bottomReached = false;
  sortable: boolean;

  constructor() { }

  /**
   * 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 ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) {
      this.atBottom.emit();
    }

    // Show/hide 'at top' button
    if (window.scrollY > window.innerHeight) {
      this.bottomReached = true;
    }

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

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

  roundBitRate(bitRate: number) {
    return Math.round(bitRate / 64);
  }

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

  setSortable(sortable: boolean) {
    this.sortable = sortable;
  }
}