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

type CenterAxis = 'both' | 'horizontal' | 'vertical';
type CenterMaxWidth = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | 'full' | 'none';
type CenterSpacing = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';

@Component({
  selector: 'ui-center',
  standalone: true,
  imports: [CommonModule],
  changeDetection: ChangeDetectionStrategy.OnPush,
  encapsulation: ViewEncapsulation.None,
  template: `
    <div 
      [ngClass]="getClasses()"
      [style.max-width]="customMaxWidth"
      [style.min-height]="customMinHeight"
      [attr.role]="role">
      
      <ng-content></ng-content>
    </div>
  `,
  styleUrl: './center.component.scss'
})
export class CenterComponent {
  @Input() axis: CenterAxis = 'both';
  @Input() maxWidth: CenterMaxWidth = 'none';
  @Input() padding?: CenterSpacing;
  @Input() margin?: CenterSpacing;
  @Input() inline = false;
  @Input() customMaxWidth?: string;
  @Input() customMinHeight?: string;
  @Input() role?: string;

  getClasses(): Record<string, boolean> {
    const classes: Record<string, boolean> = {
      'ui-center': true,
      [`ui-center--${this.axis}`]: true
    };

    if (this.maxWidth !== 'none') {
      classes[`ui-center--max-width-${this.maxWidth}`] = true;
    }

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

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

    if (this.inline) {
      classes['ui-center--inline'] = true;
    }

    return classes;
  }
}