import { Component, input, output } from '@angular/core';
import { NgTemplateOutlet } from '@angular/common';
import { RouterLink } from '@angular/router';

/** Molecule: one choice in a CIBG Huisstijl "keuzelijst" — `<li><a class="keuzelijst__link">`
    with a title and optional instructions (see choice-list.component.ts). Renders a
    plain (non-interactive) block when there's nothing to navigate to.

    Unlike the "aanvragen" pattern's `.applications li a::after` (scoped to the `a`
    tag), CIBG's `.keuzelijst__link:after`/`:hover`/`:focus` rules key off the bare
    class — keuzelijst assumes every item IS a link — so a non-anchor row would
    otherwise inherit the chevron and hover accent too. The `--static` modifier below
    suppresses both for the non-interactive case. A `[choiceActions]` slot projects a
    sibling action (e.g. "Annuleren") after the anchor — a button can't nest inside it. */
@Component({
  selector: 'app-choice-link',
  imports: [RouterLink, NgTemplateOutlet],
  styles: [`
    :host{display:contents}
    .keuzelijst__link--static::after{content:none}
    .keuzelijst__link--static:hover,.keuzelijst__link--static:focus{background-color:var(--rhc-color-cool-grey-200);box-shadow:none}
  `],
  template: `
    <li class="keuzelijst__list-item">
      @if (to()) {
        <a class="keuzelijst__link" [routerLink]="to()"><ng-container [ngTemplateOutlet]="body" /></a>
      } @else if (clickable()) {
        <a href="#" class="keuzelijst__link" (click)="onActivate($event)"><ng-container [ngTemplateOutlet]="body" /></a>
      } @else {
        <div class="keuzelijst__link keuzelijst__link--static"><ng-container [ngTemplateOutlet]="body" /></div>
      }
      <ng-content select="[choiceActions]" />
    </li>
    <ng-template #body>
      <h3 class="keuzelijst__header">{{ heading() }}</h3>
      @if (instructions()) { <p class="keuzelijst__instructions">{{ instructions() }}</p> }
    </ng-template>
  `,
})
export class ChoiceLinkComponent {
  heading = input.required<string>();
  instructions = input('');
  /** Set for a plain routerLink navigation. */
  to = input('');
  /** Set when the choice navigates imperatively (e.g. resume with query params) — the
      row still renders as a clickable `<a>`, but `activate` decides what happens. */
  clickable = input(false);
  activate = output<void>();

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