import { Component, ElementRef, input, signal, viewChildren } from '@angular/core';

interface <%= classify(name) %>Option {
  id: number;
  label: string;
}

let nextId = 0;

@Component({
  selector: '<%= selector %>',
  imports: [],
  templateUrl: './<%= dasherize(name) %>.html',
  styleUrl: './<%= dasherize(name) %>.css',
})
export class <%= classify(name) %> {
  private readonly radios = viewChildren<ElementRef<HTMLElement>>('radio');

  protected readonly instanceId = `<%= dasherize(name) %>-${nextId++}`;
  readonly label = input('Escolha um plano');
  protected readonly options: <%= classify(name) %>Option[] = [
    { id: 1, label: 'Mensal' },
    { id: 2, label: 'Anual' },
  ];

  protected readonly selectedId = signal(this.options[0].id);

  protected select(id: number): void {
    this.selectedId.set(id);
  }

  // Up/Down/Left/Right move focus and selection together; Home/End jump to first/last (APG radio group pattern).
  protected navigateGroup(event: KeyboardEvent, index: number): void {
    const items = this.radios();
    if (items.length === 0) {
      return;
    }

    let nextIndex: number;
    switch (event.key) {
      case 'ArrowDown':
      case 'ArrowRight':
        nextIndex = (index + 1) % items.length;
        break;
      case 'ArrowUp':
      case 'ArrowLeft':
        nextIndex = (index - 1 + items.length) % items.length;
        break;
      case 'Home':
        nextIndex = 0;
        break;
      case 'End':
        nextIndex = items.length - 1;
        break;
      default:
        return;
    }

    event.preventDefault();
    this.selectedId.set(this.options[nextIndex].id);
    items[nextIndex].nativeElement.focus();
  }
}