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

const MIN = 0;
const MAX = 99;

let nextId = 0;

@Component({
  selector: '<%= selector %>',
  imports: [],
  templateUrl: './<%= dasherize(name) %>.html',
  styleUrl: './<%= dasherize(name) %>.css',
})
export class <%= classify(name) %> {
  protected readonly instanceId = `<%= dasherize(name) %>-${nextId++}`;
  protected readonly min = MIN;
  protected readonly max = MAX;
  protected readonly value = signal(1);

  readonly label = input('Quantity');
  readonly decrementLabel = input('Decrease quantity');
  readonly incrementLabel = input('Increase quantity');

  protected increment(): void {
    this.setValue(this.value() + 1);
  }

  protected decrement(): void {
    this.setValue(this.value() - 1);
  }

  protected handleKeydown(event: KeyboardEvent): void {
    switch (event.key) {
      case 'ArrowUp':
        event.preventDefault();
        this.increment();
        break;
      case 'ArrowDown':
        event.preventDefault();
        this.decrement();
        break;
      case 'Home':
        event.preventDefault();
        this.setValue(this.min);
        break;
      case 'End':
        event.preventDefault();
        this.setValue(this.max);
        break;
    }
  }

  protected handleInput(event: Event): void {
    const raw = Number((event.target as HTMLInputElement).value);
    if (!Number.isNaN(raw)) {
      this.setValue(raw);
    }
  }

  private setValue(next: number): void {
    this.value.set(Math.min(this.max, Math.max(this.min, next)));
  }
}