import { Component, Input, Output, EventEmitter, ChangeDetectionStrategy } from '@angular/core';
import { CommonModule } from '@angular/common';

export type FabSize = 'small' | 'medium' | 'large';
export type FabVariant = 'primary' | 'secondary' | 'tertiary';
export type FabPosition = 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left' | 'static';

@Component({
  selector: 'ui-fab',
  standalone: true,
  imports: [CommonModule],
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    <button
      [class]="fabClasses"
      [disabled]="disabled || loading"
      [type]="type"
      (click)="handleClick($event)"
    >
      @if (loading) {
        <div class="fab-loader">
          <div class="fab-spinner"></div>
        </div>
      } @else {
        <div class="fab-icon">
          <ng-content></ng-content>
        </div>
      }
      
      @if (pulse) {
        <div class="fab-pulse"></div>
      }
      
      <div class="fab-touch-overlay"></div>
    </button>
  `,
  styleUrl: './fab.component.scss'
})
export class FabComponent {
  @Input() variant: FabVariant = 'primary';
  @Input() size: FabSize = 'medium';
  @Input() disabled: boolean = false;
  @Input() loading: boolean = false;
  @Input() type: 'button' | 'submit' | 'reset' = 'button';
  @Input() position: FabPosition = 'static';
  @Input() pulse: boolean = false;
  @Input() expandOnClick: boolean = false;
  @Input() class: string = '';

  @Output() clicked = new EventEmitter<Event>();

  get fabClasses(): string {
    return [
      'ui-fab',
      `ui-fab--${this.variant}`,
      `ui-fab--${this.size}`,
      `ui-fab--${this.position}`,
      this.disabled ? 'ui-fab--disabled' : '',
      this.loading ? 'ui-fab--loading' : '',
      this.pulse ? 'ui-fab--pulse' : '',
      this.expandOnClick ? 'ui-fab--expandable' : '',
      this.class
    ].filter(Boolean).join(' ');
  }

  handleClick(event: Event): void {
    if (!this.disabled && !this.loading) {
      this.clicked.emit(event);
      
      if (this.expandOnClick) {
        // Add animation class for expand effect
        (event.target as HTMLElement).classList.add('ui-fab--expanding');
        setTimeout(() => {
          (event.target as HTMLElement).classList.remove('ui-fab--expanding');
        }, 300);
      }
    }
  }
}