import {Component, inject, OnInit, signal} from '@angular/core';
import {IonicModule, LoadingController, ToastController} from "@ionic/angular";
import {GetUserDto, OverallrankingService, UsersService} from "../../services/api";
import {firstValueFrom} from "rxjs";

@Component({
    selector: 'app-ranking',
    templateUrl: './ranking.component.html',
    styleUrls: ['./ranking.component.scss'],
    imports: [
        IonicModule
    ]
})
export class RankingComponent implements OnInit {
    private overallRankingService = inject(OverallrankingService);
    private loadCtrl = inject(LoadingController);
    private toastCtrl = inject(ToastController);

    users = signal<GetUserDto[]>([]);

    async ngOnInit() {
        await this.fetchUsers();
    }

    async fetchUsers() {
        const loading = await this.loadCtrl.create({
            message: 'Chargement...',
            duration: 1000,
            spinner: 'circles'
        });
        await loading.present();

        try {
            const users = await firstValueFrom(this.overallRankingService.getOverallRankingEndpoint());
            this.users.set(users);
        } catch (e) {
            const toast = await this.toastCtrl.create({
                message: 'Impossible de charger les joueurs',
                duration: 2000,
                color: 'primary'
            });
            await toast.present();
        }
    }
}

//TODO: FAIRE NOS SERVICES POUR TOAST ET LOADING