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

type FlexDirection = 'row' | 'row-reverse' | 'column' | 'column-reverse';
type FlexWrap = 'nowrap' | 'wrap' | 'wrap-reverse';
type FlexJustify = 'start' | 'end' | 'center' | 'between' | 'around' | 'evenly';
type FlexAlign = 'start' | 'end' | 'center' | 'baseline' | 'stretch';
type FlexAlignContent = 'start' | 'end' | 'center' | 'between' | 'around' | 'stretch';
type FlexGap = 'xs' | 'sm' | 'md' | 'lg' | 'xl';

@Component({
  selector: 'ui-flex',
  standalone: true,
  imports: [CommonModule],
  changeDetection: ChangeDetectionStrategy.OnPush,
  encapsulation: ViewEncapsulation.None,
  template: `
    <div 
      [ngClass]="getClasses()"
      [attr.role]="role">
      <ng-content></ng-content>
    </div>
  `,
  styleUrl: './flex.component.scss'
})
export class FlexComponent {
  // Flexbox properties
  @Input() direction: FlexDirection = 'row';
  @Input() wrap: FlexWrap = 'nowrap';
  @Input() justify: FlexJustify = 'start';
  @Input() align: FlexAlign = 'stretch';
  @Input() alignContent?: FlexAlignContent;
  
  // Gap properties
  @Input() gap?: FlexGap;
  @Input() rowGap?: FlexGap;
  @Input() columnGap?: FlexGap;
  
  // Display variants
  @Input() inline = false;
  
  // Size variants
  @Input() fullWidth = false;
  @Input() fullHeight = false;
  @Input() full = false;
  
  // Accessibility
  @Input() role?: string;

  getClasses(): Record<string, boolean> {
    const classes: Record<string, boolean> = {
      'ui-flex': true
    };

    // Direction
    if (this.direction) {
      classes[`ui-flex--${this.direction}`] = true;
    }

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

    // Justify content
    if (this.justify) {
      classes[`ui-flex--justify-${this.justify}`] = true;
    }

    // Align items
    if (this.align) {
      classes[`ui-flex--align-${this.align}`] = true;
    }

    // Align content (for wrapped containers)
    if (this.alignContent) {
      classes[`ui-flex--align-content-${this.alignContent}`] = true;
    }

    // Gap properties
    if (this.gap) {
      classes[`ui-flex--gap-${this.gap}`] = true;
    }
    
    if (this.rowGap) {
      classes[`ui-flex--row-gap-${this.rowGap}`] = true;
    }
    
    if (this.columnGap) {
      classes[`ui-flex--column-gap-${this.columnGap}`] = true;
    }

    // Display variant
    if (this.inline) {
      classes['ui-flex--inline'] = true;
    }

    // Size variants
    if (this.full) {
      classes['ui-flex--full'] = true;
    } else {
      if (this.fullWidth) {
        classes['ui-flex--full-width'] = true;
      }
      if (this.fullHeight) {
        classes['ui-flex--full-height'] = true;
      }
    }

    return classes;
  }
}