import { AsyncPipe } from '@angular/common';
import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
import { TranslatePipe } from '../../../i18n/translate.pipe';
import { TranslateService } from '../../../i18n/translate.service';
import { DiagnosticsFacade } from '../facade/diagnostics.facade';

@Component({
  selector: 'app-diagnostics-page',
  standalone: true,
  imports: [AsyncPipe, TranslatePipe],
  templateUrl: './diagnostics-page.component.html',
  styleUrls: ['./diagnostics-page.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class DiagnosticsPageComponent {
  private readonly diagnosticsFacade = inject(DiagnosticsFacade);
  private readonly translate = inject(TranslateService);

  readonly report$ = this.diagnosticsFacade.loadReport();
  readonly devMode = this.diagnosticsFacade.devMode;

  tDiagnostic(value: string): string {
    const [key, param] = value.split(':');
    return key.startsWith('diagnostics.')
      ? this.translate.t(key, param ? { value: param } : undefined)
      : value;
  }
}