import { Component, Input } from '@angular/core';
import { ThemePalette } from '@angular/material/core';
import { ProgressSpinnerMode } from '@angular/material/progress-spinner';
import { lastValueFrom, max } from 'rxjs';
import { Artist } from '../artist';
import { EventDetailsService } from '../event-details.service';
import { formatNumber } from '@angular/common';

@Component({
  selector: 'app-artist-detail',
  templateUrl: './artist-detail.component.html',
  styleUrls: ['./artist-detail.component.css']
})
export class ArtistDetailComponent {
  @Input() artists: string[] = [];
  detailsLoaded: boolean = false;
  artistsDetails: Artist[]= [];

  constructor(private eventDetailService: EventDetailsService){}

  spinnerColor: ThemePalette = 'warn';
  spinnerMode: ProgressSpinnerMode = 'determinate';
  spinnervalue: number = 99;
  ngOnInit(){
    this.getDetails();
  }

  async getDetails(){
    for(var i=0; i <Math.min(this.artists.length, 10); i++){
      const detail: Artist = await lastValueFrom(this.eventDetailService.getArtistDetail(this.artists[i]));
      if(typeof detail.name !== 'undefined'){
        this.artistsDetails.push(detail);
      }
    }
    // for(var name of this.artists){
    //   const detail: Artist = await lastValueFrom(this.eventDetailService.getArtistDetail(name));
    //   if(typeof detail.name !== 'undefined'){
    //     this.artistsDetails.push(detail);
    //   }
    // }
    this.detailsLoaded = true;
  }

  followerNumberFormat(followers: number){
    return formatNumber(followers, 'en-US');
  }

}