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

type MasonryColumns = 2 | 3 | 4 | 5 | 6 | 'auto-fit' | 'auto-fill';
type MasonryGap = 'sm' | 'md' | 'lg';
type MasonryPadding = 'none' | 'sm' | 'md' | 'lg';
type MasonryAlignment = 'start' | 'center' | 'end';

@Component({
  selector: 'ui-masonry',
  standalone: true,
  imports: [CommonModule],
  changeDetection: ChangeDetectionStrategy.OnPush,
  encapsulation: ViewEncapsulation.None,
  template: `
    <div 
      class="ui-masonry"
      [class.ui-masonry--gap-sm]="gap === 'sm'"
      [class.ui-masonry--gap-md]="gap === 'md'"
      [class.ui-masonry--gap-lg]="gap === 'lg'"
      [class.ui-masonry--padding-none]="padding === 'none'"
      [class.ui-masonry--padding-sm]="padding === 'sm'"
      [class.ui-masonry--padding-md]="padding === 'md'"
      [class.ui-masonry--padding-lg]="padding === 'lg'"
      [class.ui-masonry--cols-2]="columns === 2"
      [class.ui-masonry--cols-3]="columns === 3"
      [class.ui-masonry--cols-4]="columns === 4"
      [class.ui-masonry--cols-5]="columns === 5"
      [class.ui-masonry--cols-6]="columns === 6"
      [class.ui-masonry--auto-fit]="columns === 'auto-fit'"
      [class.ui-masonry--auto-fill]="columns === 'auto-fill'"
      [class.ui-masonry--align-start]="alignment === 'start'"
      [class.ui-masonry--align-center]="alignment === 'center'"
      [class.ui-masonry--align-end]="alignment === 'end'"
      [style.column-width]="minColumnWidth || null"
      [attr.role]="role"
      [attr.aria-label]="ariaLabel">
      
      <ng-content></ng-content>
    </div>
  `,
  styleUrl: './masonry.component.scss'
})
export class MasonryComponent {
  @Input() columns: MasonryColumns = 'auto-fit';
  @Input() gap: MasonryGap = 'md';
  @Input() padding: MasonryPadding = 'md';
  @Input() alignment: MasonryAlignment = 'start';
  @Input() minColumnWidth: string | null = null;
  
  // Accessibility
  @Input() role: string = 'grid';
  @Input() ariaLabel: string | null = null;
}