import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
import { NgClass } from '@angular/common';

export type ButtonVariant =
  | 'primary'
  | 'secondary'
  | 'neutral-outline'
  | 'borderless'
  | 'danger'
  | 'danger-secondary'
  | 'cancel';

@Component({
  selector: 'app-button',
  imports: [NgClass],
  templateUrl: './button.component.html',
  styleUrl: './button.component.scss',
  changeDetection: ChangeDetectionStrategy.OnPush,
  host: {
    '[class]': 'hostClasses()',
    '[attr.aria-disabled]': 'disabled()',
    '(click)': 'onHostClick($event)'
  }
})
export class ButtonComponent {
  readonly variant = input<ButtonVariant>('primary');
  readonly type = input<'button' | 'submit' | 'reset'>('button');
  readonly disabled = input(false);
  readonly hostClass = input<string>('');
  readonly buttonClass = input<string>('');
  protected readonly hostClasses = computed(() =>
    [this.hostClass(), this.disabled() ? 'app-button--disabled' : ''].filter(Boolean).join(' ')
  );

  protected readonly buttonClasses = computed(() => {
    const variants: Record<ButtonVariant, string> = {
      primary: 'btn-primary',
      secondary: 'btn-outline-primary',
      'neutral-outline': 'btn-outline-neutral',
      borderless: 'btn-borderless',
      danger: 'btn-danger',
      'danger-secondary': 'btn-outline-danger',
      cancel: 'btn-secondary'
    };

    return ['btn', variants[this.variant()], this.buttonClass()];
  });

  protected onHostClick(event: Event): void {
    if (!this.disabled()) {
      return;
    }

    event.preventDefault();
    event.stopPropagation();
    event.stopImmediatePropagation();
  }
}