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

type GridColumns = 1 | 2 | 3 | 4 | 6 | 12 | 'auto-fill' | 'auto-fit';
type GridGap = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
type GridAlignment = 'start' | 'end' | 'center' | 'stretch';
type GridContentAlignment = 'start' | 'end' | 'center' | 'stretch' | 'space-around' | 'space-between' | 'space-evenly';
type GridAutoRows = 'min' | 'max' | 'fr';

@Component({
  selector: 'ui-grid-system',
  standalone: true,
  imports: [CommonModule],
  changeDetection: ChangeDetectionStrategy.OnPush,
  encapsulation: ViewEncapsulation.None,
  template: `
    <div 
      class="ui-grid-system"
      [class.ui-grid-system--cols-{{columns}}]="columns"
      [class.ui-grid-system--gap-{{gap}}]="gap"
      [class.ui-grid-system--row-gap-{{rowGap}}]="rowGap"
      [class.ui-grid-system--column-gap-{{columnGap}}]="columnGap"
      [class.ui-grid-system--justify-{{justifyItems}}]="justifyItems"
      [class.ui-grid-system--align-{{alignItems}}]="alignItems"
      [class.ui-grid-system--justify-content-{{justifyContent}}]="justifyContent"
      [class.ui-grid-system--align-content-{{alignContent}}]="alignContent"
      [class.ui-grid-system--auto-rows-{{autoRows}}]="autoRows"
      [class.ui-grid-system--dense]="dense"
      [class.ui-grid-system--responsive]="responsive"
      [style.grid-template-columns]="customColumns"
      [style.grid-template-rows]="customRows"
      [attr.role]="role">
      
      <ng-content></ng-content>
    </div>
  `,
  styleUrl: './grid-system.component.scss'
})
export class GridSystemComponent {
  @Input() columns: GridColumns = 'auto-fit';
  @Input() gap: GridGap = 'md';
  @Input() rowGap?: GridGap;
  @Input() columnGap?: GridGap;
  @Input() justifyItems?: GridAlignment;
  @Input() alignItems?: GridAlignment;
  @Input() justifyContent?: GridContentAlignment;
  @Input() alignContent?: GridContentAlignment;
  @Input() autoRows?: GridAutoRows;
  @Input() dense = false;
  @Input() responsive = true;
  @Input() customColumns?: string;
  @Input() customRows?: string;
  @Input() role = 'grid';
}