import { CommonModule } from '@angular/common';
import { Component, EventEmitter, Input, Output, inject } from '@angular/core';
import { ButtonModule } from '@progress/kendo-angular-buttons';

import { CutoverI18nService } from '../core/cutover-i18n.service';

type StepAction = {
  id: string;
  label: string;
  emphasis?: 'primary' | 'secondary';
};

@Component({
  selector: 'app-journey-step-actions',
  standalone: true,
  imports: [CommonModule, ButtonModule],
  template: `
    <div class="step-actions-panel">
      <div class="action-grid">
        <button
          *ngFor="let action of stepActions"
          kendoButton
          class="workflow-action-btn"
          [fillMode]="action.emphasis === 'secondary' ? 'outline' : 'solid'"
          (click)="actionRequested.emit(action.id)"
          [disabled]="loading"
        >
          {{ t(action.label) }}
        </button>
      </div>
      <div class="step-actions-panel__head step-actions-panel__head--secondary">
        <button kendoButton fillMode="outline" class="refresh-action-btn" (click)="refreshRequested.emit()" [disabled]="loading">
          {{ t('Refresh') }}
        </button>
      </div>
    </div>
  `
})
export class JourneyStepActionsComponent {
  private readonly i18n = inject(CutoverI18nService);

  @Input() stepActions: readonly StepAction[] = [];
  @Input() loading = false;

  @Output() refreshRequested = new EventEmitter<void>();
  @Output() actionRequested = new EventEmitter<string>();

  protected t(value: string): string {
    return this.i18n.text(value);
  }
}
