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

export type IconButtonVariant =
  | 'user'
  | 'trash'
  | 'angle-right'
  | 'angle-left'
  | 'angle-up'
  | 'angle-down'
  | 'copy'
  | 'download'
  | 'share'
  | 'bars';

@Component({
  selector: 'app-icon-button',
  imports: [NgClass],
  templateUrl: './icon-button.component.html',
  styleUrl: './icon-button.component.scss',
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class IconButtonComponent {
  readonly variant = input.required<IconButtonVariant>();
  readonly disabled = input(false);
  readonly ariaLabel = input<string>('');
  readonly ariaExpanded = input<boolean | null>(null);
  readonly ariaControls = input<string | null>(null);
  readonly clicked = output<MouseEvent>();

  protected readonly iconClass = computed(() => {
    const classes: Record<IconButtonVariant, string> = {
      user: 'fa-regular fa-circle-user',
      trash: 'fa-solid fa-trash',
      'angle-right': 'fa-solid fa-angle-right',
      'angle-left': 'fa-solid fa-angle-left',
      'angle-up': 'fa-solid fa-angle-up',
      'angle-down': 'fa-solid fa-angle-down',
      copy: 'fa-solid fa-copy',
      download: 'fa-solid fa-download',
      share: 'fa-solid fa-share-nodes',
      bars: 'fa-solid fa-bars',
    };
    return classes[this.variant()];
  });

  protected readonly buttonClasses = computed(() => {
    return ['icon-btn', `icon-btn--${this.variant()}`];
  });
}