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

type SpacerSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl';
type SpacerVariant = 'component-xs' | 'component-sm' | 'component-md' | 'component-lg' | 'component-xl' | 
                    'layout-xs' | 'layout-sm' | 'layout-md' | 'layout-lg' | 'layout-xl';
type SpacerDirection = 'both' | 'horizontal' | 'vertical';

@Component({
  selector: 'ui-spacer',
  standalone: true,
  imports: [CommonModule],
  changeDetection: ChangeDetectionStrategy.OnPush,
  encapsulation: ViewEncapsulation.None,
  template: `
    <div 
      class="ui-spacer"
      [ngClass]="getClasses()"
      [style.width]="customWidth"
      [style.height]="customHeight"
      [attr.aria-hidden]="true">
    </div>
  `,
  styleUrl: './spacer.component.scss'
})
export class SpacerComponent {
  @Input() size: SpacerSize = 'md';
  @Input() variant?: SpacerVariant;
  @Input() direction: SpacerDirection = 'both';
  @Input() flexible = false;
  @Input() responsive = true;
  @Input() debug = false;
  @Input() customWidth?: string;
  @Input() customHeight?: string;

  getClasses(): Record<string, boolean> {
    const classes: Record<string, boolean> = {};
    
    if (this.size && !this.variant) {
      classes[`ui-spacer--${this.size}`] = true;
    }
    
    if (this.variant) {
      classes[`ui-spacer--${this.variant}`] = true;
    }
    
    if (this.direction !== 'both') {
      classes[`ui-spacer--${this.direction}`] = true;
    }
    
    classes['ui-spacer--flexible'] = this.flexible;
    classes['ui-spacer--responsive'] = this.responsive;
    classes['ui-spacer--debug'] = this.debug;
    
    return classes;
  }
}