import { Component, Input, Output, EventEmitter, ChangeDetectionStrategy } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
import { IconDefinition } from '@fortawesome/fontawesome-svg-core';

export type ChipVariant = 'filled' | 'outlined' | 'elevated';
export type ChipSize = 'sm' | 'md' | 'lg';
export type ChipRadius = 'none' | 'sm' | 'md' | 'lg' | 'capsule';

@Component({
  selector: 'ui-chip',
  standalone: true,
  imports: [CommonModule, FontAwesomeModule],
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    <div 
      [class]="chipClasses"
      [attr.tabindex]="disabled ? null : '0'"
      [attr.role]="clickable ? 'button' : null"
      [attr.aria-disabled]="disabled"
      [attr.aria-selected]="selected"
      (click)="handleClick($event)"
      (keydown.enter)="handleClick($event)"
      (keydown.space)="handleClick($event)"
    >
      @if (leadingIcon) {
        <div class="chip-leading-icon">
          <fa-icon [icon]="leadingIcon"></fa-icon>
        </div>
      }
      
      @if (avatar) {
        <div class="chip-avatar">
          <img [src]="avatar" [alt]="avatarAlt || label" />
        </div>
      }
      
      <div class="chip-label">
        {{ label }}
      </div>
      
      @if (removable && closeIcon) {
        <div class="chip-trailing-icon" (click)="handleRemove($event)" [attr.tabindex]="disabled ? null : '0'">
          <fa-icon [icon]="closeIcon"></fa-icon>
        </div>
      }
      
      @if (trailingIcon && !removable) {
        <div class="chip-trailing-icon">
          <fa-icon [icon]="trailingIcon"></fa-icon>
        </div>
      }
    </div>
  `,
  styleUrl: './chip.component.scss'
})
export class ChipComponent {
  @Input() label: string = '';
  @Input() variant: ChipVariant = 'filled';
  @Input() size: ChipSize = 'md';
  @Input() radius: ChipRadius = 'md';
  @Input() disabled: boolean = false;
  @Input() selected: boolean = false;
  @Input() clickable: boolean = false;
  @Input() removable: boolean = false;
  @Input() leadingIcon?: IconDefinition;
  @Input() trailingIcon?: IconDefinition;
  @Input() closeIcon?: IconDefinition;
  @Input() avatar?: string;
  @Input() avatarAlt?: string;
  @Input() class: string = '';

  @Output() chipClick = new EventEmitter<Event>();
  @Output() chipRemove = new EventEmitter<Event>();

  get chipClasses(): string {
    return [
      'ui-chip',
      `ui-chip--${this.variant}`,
      `ui-chip--${this.size}`,
      `ui-chip--radius-${this.radius}`,
      this.disabled ? 'ui-chip--disabled' : '',
      this.selected ? 'ui-chip--selected' : '',
      this.clickable ? 'ui-chip--clickable' : '',
      this.removable ? 'ui-chip--removable' : '',
      this.leadingIcon ? 'ui-chip--with-leading-icon' : '',
      this.trailingIcon ? 'ui-chip--with-trailing-icon' : '',
      this.avatar ? 'ui-chip--with-avatar' : '',
      this.class
    ].filter(Boolean).join(' ');
  }

  handleClick(event: Event): void {
    if (!this.disabled && this.clickable) {
      this.chipClick.emit(event);
    }
  }

  handleRemove(event: Event): void {
    event.stopPropagation();
    if (!this.disabled) {
      this.chipRemove.emit(event);
    }
  }
}