import { DecimalPipe } from '@angular/common';
import { Component, effect, inject, input, signal } from '@angular/core';
import { tap } from 'rxjs';
import { InfoCardModule } from '../../../../core/components/info-card/info-card.component';
import {
  KpiInfo,
  Metric,
} from '../../../../core/data-access/graphql/generated/generated';
import { ManagerDashboardService } from '../../manager-dashboard.service';
import { SkeletonDirective } from '../../../../core/components/skeleton-rect/skeleton.directive';

@Component({
  selector: 'app-manager-info-card',
  imports: [InfoCardModule, DecimalPipe, SkeletonDirective],
  templateUrl: './manager-info-card.component.html',
  styleUrl: './manager-info-card.component.scss',
})
export class ManagerInfoCardComponent {
  private service = inject(ManagerDashboardService);

  isLoading = signal<boolean>(false);
  ordinanceType = input.required<string>();
  kpi = signal<KpiInfo | undefined>(undefined);
  metrics = signal<Metric[]>([]);

  constructor() {
    effect(() => {
      this.isLoading.set(true);
      this.service
        .fetchManagerKpi(this.ordinanceType())
        .pipe(
          tap((res) => this.metrics.set(res.additional)),
          tap((res) => this.kpi.set(res)),
          tap(() => this.isLoading.set(false))
        )
        .subscribe();
    });
  }
}
