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,
  TicketValidationState,
} from '../../../core/data-access/graphql/generated/generated';
import { TicketsService } from '../tickets.service';
import { SkeletonDirective } from '../../../core/components/skeleton-rect/skeleton.directive';

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

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

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

  title(): string | undefined {
    switch (this.ticketState()) {
      case TicketValidationState.Created:
        return 'Prüfung Daten';
      case TicketValidationState.UserInteractionRequired:
        return 'Prüfung Genehmigungen';
      case TicketValidationState.TdUncertain:
        return 'Prüfung Transportscheine';
      case TicketValidationState.DocumentsMissing:
        return 'Prüfung Dokumente';
      default:
        return undefined;
    }
  }
}
