import { Component, input, output } from '@angular/core';
import type { DeliveryChannel } from '@shared/upload/upload.machine';

/** Atom: choose how a document is delivered — uploaded digitally or sent by post.
    Thin wrapper over the Utrecht/RHC radio CSS. Pure UI: emits the chosen channel. */
@Component({
  selector: 'app-delivery-channel-toggle',
  styles: [`
    .radio-option {
      display: flex;
      align-items: center;
      gap: var(--rhc-space-max-md);
      padding-block: var(--rhc-space-max-sm);
      margin: 0;
    }
    .radio-option .form-check-input { margin: 0; float: none; }
  `],
  template: `
    <div role="radiogroup">
      @for (opt of options; track opt.value) {
        <label class="form-check-label radio-option">
          <input
            class="form-check-input"
            type="radio"
            [name]="name()"
            [value]="opt.value"
            [checked]="channel() === opt.value"
            [disabled]="disabled()"
            (change)="channelChange.emit(opt.value)" />
          {{ opt.label }}
        </label>
      }
    </div>
  `,
})
export class DeliveryChannelToggleComponent {
  channel = input.required<DeliveryChannel>();
  name = input.required<string>();
  disabled = input(false);

  channelChange = output<DeliveryChannel>();

  protected readonly options: ReadonlyArray<{ value: DeliveryChannel; label: string }> = [
    { value: 'digital', label: $localize`:@@upload.channel.digital:Digitaal uploaden` },
    { value: 'post', label: $localize`:@@upload.channel.post:Per post nasturen` },
  ];
}
