import { Component, ElementRef, input, output, viewChild } from '@angular/core';

/** Molecule: the CIBG Huisstijl "stappenindicator" — numbered circles (`.step-list`),
    visited steps clickable for back-only navigation, and the step title merged into
    the same block (process name + "Stap X van Y: Titel", per the aanvraagproces
    pattern). Domain-free; forward navigation only via the wizard's own buttons. */
@Component({
  selector: 'app-stepper',
  template: `
    <div class="stepper">
      <ol class="step-list order-1">
        @for (label of steps(); track label; let i = $index) {
          <li>
            @if (i < current()) {
              <a
                href="#"
                class="step visited"
                (click)="select($event, i)"
                [attr.aria-label]="terugNaar(i, label)"
              >
                <span class="visually-hidden" i18n="@@stepper.stap">Stap</span> {{ i + 1 }}
                <span class="visually-hidden" i18n="@@stepper.voltooid">Voltooid</span>
              </a>
            } @else if (i === current()) {
              <span
                class="step active"
                aria-current="step"
                [attr.aria-label]="huidigeStap(i, label)"
              >
                <span class="visually-hidden" i18n="@@stepper.stap">Stap</span> {{ i + 1 }}
                <span class="visually-hidden" i18n="@@stepper.huidig">Huidige stap</span>
              </span>
            } @else {
              <span class="step" [attr.aria-label]="stap(i, label)">
                <span class="visually-hidden" i18n="@@stepper.stap">Stap</span> {{ i + 1 }}
              </span>
            }
          </li>
        }
      </ol>
      <h2 #title tabindex="-1" class="h1 order-0">
        @if (processName()) {
          <span class="process-name">{{ processName() }}</span>
        }
        <ng-container i18n="@@stepper.stapVan"
          >Stap {{ current() + 1 }}<span class="visually-hidden"> van {{ steps().length }}</span
          >: {{ stepTitle() || steps()[current()] }}</ng-container
        >
      </h2>
    </div>
  `,
})
export class StepperComponent {
  steps = input.required<string[]>();
  current = input.required<number>();
  /** Name of the overall process, shown above the step title (e.g. "Herregistratie aanvragen"). */
  processName = input('');
  /** Overrides the step label as the title; falls back to `steps()[current()]`. */
  stepTitle = input('');

  /** Emitted when a visited (earlier) step is clicked — back-navigation only. */
  stepSelected = output<number>();

  private titleEl = viewChild<ElementRef<HTMLElement>>('title');

  /** wizard-shell calls this after a step change so the new title is announced. */
  focusTitle(): void {
    this.titleEl()?.nativeElement.focus();
  }

  protected select(ev: Event, i: number) {
    ev.preventDefault(); // fragment href resolves against <base href>, not the route
    this.stepSelected.emit(i);
  }

  protected stap(i: number, label: string) {
    return $localize`:@@stepper.naarStap:Stap ${i + 1}:nummer: ${label}:label:`;
  }
  protected huidigeStap(i: number, label: string) {
    return $localize`:@@stepper.huidigeStapLabel:Huidige stap, stap ${i + 1}:nummer: ${label}:label:`;
  }
  protected terugNaar(i: number, label: string) {
    return $localize`:@@stepper.terugNaarStap:Terug naar stap ${i + 1}:nummer: ${label}:label:`;
  }
}