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

type ColumnCount = '1' | '2' | '3' | '4' | '5' | '6' | 'auto';
type ColumnGap = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
type ColumnFill = 'auto' | 'balance' | 'balance-all';
type ColumnRule = 'none' | 'solid' | 'dashed' | 'dotted';
type ColumnRuleWidth = '1' | '2' | '3';

@Component({
  selector: 'ui-column',
  standalone: true,
  imports: [CommonModule],
  changeDetection: ChangeDetectionStrategy.OnPush,
  encapsulation: ViewEncapsulation.None,
  template: `
    <div 
      [ngClass]="getClasses()"
      [attr.role]="role">
      <ng-content></ng-content>
    </div>
  `,
  styleUrl: './column.component.scss'
})
export class ColumnComponent {
  // Column layout properties
  @Input() count: ColumnCount = '2';
  @Input() gap: ColumnGap = 'md';
  @Input() fill: ColumnFill = 'balance';
  
  // Column rule (divider) properties
  @Input() rule: ColumnRule = 'none';
  @Input() ruleWidth: ColumnRuleWidth = '1';
  
  // Column span control
  @Input() spanAll = false;
  
  // Size variants
  @Input() fullWidth = false;
  @Input() fullHeight = false;
  
  // Responsive breakpoint control
  @Input() responsive = true;
  
  // Accessibility
  @Input() role?: string;

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

    // Column count
    if (this.count) {
      classes[`ui-column--count-${this.count}`] = true;
    }

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

    // Fill
    if (this.fill) {
      classes[`ui-column--fill-${this.fill}`] = true;
    }

    // Rule
    if (this.rule && this.rule !== 'none') {
      classes[`ui-column--rule-${this.rule}`] = true;
      
      if (this.ruleWidth) {
        classes[`ui-column--rule-width-${this.ruleWidth}`] = true;
      }
    }

    // Span all
    if (this.spanAll) {
      classes['ui-column--span-all'] = true;
    }

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

    // Responsive
    if (this.responsive) {
      classes['ui-column--responsive'] = true;
    }

    return classes;
  }
}