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

type StackDirection = 'column' | 'row';
type StackSpacing = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl';
type StackAlignment = 'start' | 'center' | 'end' | 'stretch' | 'baseline';
type StackJustify = 'start' | 'center' | 'end' | 'between' | 'around' | 'evenly';
type StackWrap = 'nowrap' | 'wrap' | 'wrap-reverse';

@Component({
  selector: 'ui-stack',
  standalone: true,
  imports: [CommonModule],
  changeDetection: ChangeDetectionStrategy.OnPush,
  encapsulation: ViewEncapsulation.None,
  template: `
    <div 
      [ngClass]="getClasses()"
      [attr.role]="role"
      [style.gap]="customGap">
      
      <ng-content></ng-content>
    </div>
  `,
  styleUrl: './stack.component.scss'
})
export class StackComponent {
  @Input() direction: StackDirection = 'column';
  @Input() spacing: StackSpacing = 'md';
  @Input() align?: StackAlignment;
  @Input() justify?: StackJustify;
  @Input() wrap?: StackWrap;
  @Input() inline = false;
  @Input() responsive = true;
  @Input() divider = false;
  @Input() customGap?: string;
  @Input() role?: string;

  getClasses(): Record<string, boolean> {
    const classes: Record<string, boolean> = {
      'ui-stack': true,
      [`ui-stack--${this.direction}`]: true,
      [`ui-stack--spacing-${this.spacing}`]: true,
      'ui-stack--inline': this.inline,
      'ui-stack--responsive': this.responsive,
      'ui-stack--divider': this.divider
    };

    if (this.align) {
      classes[`ui-stack--align-${this.align}`] = true;
    }

    if (this.justify) {
      classes[`ui-stack--justify-${this.justify}`] = true;
    }

    if (this.wrap) {
      classes[`ui-stack--wrap-${this.wrap}`] = true;
    }

    return classes;
  }
}