import { Component, Input, Output, EventEmitter, HostListener } from '@angular/core';

@Component({
  selector: 'ccl-button',
  standalone: true,
  templateUrl: './button.html',
  styleUrl: './button.css'
})
export class ButtonComponent {
  @Input() variant: 'primary' | 'secondary' | 'tertiary' | 'destructive' = 'primary';
  @Input() size: 'sm' | 'md' | 'lg' = 'md';
  @Input() appearance: 'solid' | 'outline' = 'solid';
  @Input() shape: 'square' | 'rounded' | 'pill' = 'rounded';
  @Input() disabled = false;
  @Input() loading = false;
  @Input() ariaLabel?: string;
  @Input() ariaDescribedBy?: string;
  @Input() ariaExpanded?: boolean;
  @Input() ariaPressed?: boolean;
  @Output() clicked = new EventEmitter<void>();

  @HostListener('keydown', ['$event'])
  onKeydown(event: KeyboardEvent): void {
    if (event.key === 'Enter' || event.key === ' ') {
      event.preventDefault();
      if (!this.disabled && !this.loading) {
        this.onClick();
      }
    }
  }

  onClick(): void {
    this.clicked.emit();
  }

  get buttonClasses(): string {
    const classes = [
      'ccl-btn',
      `ccl-btn--${this.variant}`,
      `ccl-btn--${this.size}`,
      `ccl-btn--shape-${this.shape}`
    ];
    
    if (this.appearance === 'outline') {
      classes.push('ccl-btn--outline');
    }
    
    if (this.loading) {
      classes.push('ccl-btn--loading');
    }
    
    return classes.join(' ');
  }

  get ariaAttributes(): { [key: string]: any } {
    const attrs: { [key: string]: any } = {};
    
    if (this.ariaLabel) {
      attrs['aria-label'] = this.ariaLabel;
    }
    
    if (this.ariaDescribedBy) {
      attrs['aria-describedby'] = this.ariaDescribedBy;
    }
    
    if (this.ariaExpanded !== undefined) {
      attrs['aria-expanded'] = this.ariaExpanded;
    }
    
    if (this.ariaPressed !== undefined) {
      attrs['aria-pressed'] = this.ariaPressed;
    }
    
    attrs['aria-disabled'] = this.disabled || this.loading;
    
    return attrs;
  }
}