import {Component, inject, input, output} from '@angular/core';
import {IonicModule, LoadingController, ToastController} from "@ionic/angular";
import {GetGroupDetailsDto, GetGroupDto, GroupsService} from "../../services/api";
import {addIcons} from "ionicons";
import {chatbubblesOutline, chevronForwardOutline} from "ionicons/icons";
import {firstValueFrom} from "rxjs";

addIcons({
    'group': chatbubblesOutline,
    'chevron': chevronForwardOutline,
});

@Component({
    selector: 'app-groups',
    templateUrl: './groups.component.html',
    styleUrls: ['./groups.component.scss'],
    imports: [
        IonicModule
    ]
})
export class GroupsComponent {
    private groupsService = inject(GroupsService);
    private toastCtrl = inject(ToastController);
    private loadCtrl = inject(LoadingController);

    groups = input.required<GetGroupDto[]>();

    group = output<GetGroupDetailsDto>();

    async selectedGroup(id: number) {
        const loading = await this.loadCtrl.create({
            message: 'Chargement...',
            spinner: 'lines-sharp-small'
        });
        await loading.present();

        try {
            const group = await firstValueFrom(this.groupsService.getGroupDetailsEndpoint(id));
            this.group.emit(group);
        } catch {
            const toast = await this.toastCtrl.create({
                message: 'Impossible de charger le groupe',
                duration: 2000,
                color: 'danger'
            });
            await toast.present();
        }
        await loading.dismiss();
    }
}