import { Component, OnInit, inject, signal } from '@angular/core';
import { MatButtonModule } from '@angular/material/button';
import { MatTableModule } from '@angular/material/table';
import { RouterLink } from '@angular/router';
import { firstValueFrom } from 'rxjs';

import { GruppiApiService, GruppoListItem } from '../gruppi-api.service';

@Component({
  selector: 'app-gruppi-list',
  imports: [MatButtonModule, MatTableModule, RouterLink],
  templateUrl: './gruppi-list.html',
  styleUrl: './gruppi-list.css'
})
export class GruppiList implements OnInit {
  private readonly gruppiApi = inject(GruppiApiService);

  readonly displayedColumns = ['nome', 'regione'];

  readonly loading = signal(true);
  readonly loadError = signal<string | null>(null);
  readonly gruppi = signal<GruppoListItem[]>([]);

  async ngOnInit(): Promise<void> {
    await this.caricaGruppi();
  }

  private async caricaGruppi(): Promise<void> {
    this.loading.set(true);
    this.loadError.set(null);

    try {
      const gruppi = await firstValueFrom(this.gruppiApi.listGruppi());
      this.gruppi.set(gruppi);
    } catch {
      this.loadError.set("Impossibile caricare l'elenco dei gruppi. Riprova più tardi.");
    } finally {
      this.loading.set(false);
    }
  }
}