import { ChangeDetectionStrategy, Component, computed, input, model, output } from '@angular/core';

@Component({
  selector: 'app-quantity-selector',
  standalone: true,
  imports: [],
  templateUrl: './quantity-selector.component.html',
  styleUrl: './quantity-selector.component.scss',
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class QuantitySelectorComponent {
  readonly quantity = model<number>(1);
  readonly min = input<number>(1);
  readonly max = input<number | null>(100);
  readonly size = input<'small' | 'medium'>('medium');
  readonly disabled = input<boolean>(false);

  protected readonly atMaximum = computed(() => {
    const max = this.max();
    return max !== null && this.quantity() >= max;
  });

  readonly increase = output<void>();
  readonly decrease = output<void>();

  protected onDecrease(): void {
    if (!this.disabled() && this.quantity() > this.min()) {
      this.quantity.set(this.quantity() - 1);
      this.decrease.emit();
    }
  }

  protected onIncrease(): void {
    if (!this.disabled() && !this.atMaximum()) {
      this.quantity.set(this.quantity() + 1);
      this.increase.emit();
    }
  }
}
