import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { GridSystemComponent } from '../../../../../ui-essentials/src/lib/components/layout';

@Component({
  selector: 'ui-grid-system-demo',
  standalone: true,
  imports: [CommonModule, GridSystemComponent],
  template: `
    <div class="demo-container">
      <h2>Grid System Demo</h2>
      
      <!-- Column Variants -->
      <section class="demo-section">
        <h3>Column Variants</h3>
        <div class="demo-row">
          @for (cols of columnVariants; track cols) {
            <div class="demo-grid-container">
              <h4>{{ cols }} Columns</h4>
              <ui-grid-system [columns]="cols" class="demo-grid">
                @for (item of getItems(getItemCount(cols)); track $index) {
                  <div class="demo-grid-item">{{ $index + 1 }}</div>
                }
              </ui-grid-system>
            </div>
          }
        </div>
      </section>
      
      <!-- Gap Variants -->
      <section class="demo-section">
        <h3>Gap Sizes</h3>
        <div class="demo-row">
          @for (gap of gapSizes; track gap) {
            <div class="demo-grid-container">
              <h4>Gap: {{ gap }}</h4>
              <ui-grid-system [columns]="3" [gap]="gap" class="demo-grid">
                @for (item of getItems(6); track $index) {
                  <div class="demo-grid-item">{{ $index + 1 }}</div>
                }
              </ui-grid-system>
            </div>
          }
        </div>
      </section>
      
      <!-- Auto-fit and Auto-fill -->
      <section class="demo-section">
        <h3>Auto Layout</h3>
        <div class="demo-grid-container">
          <h4>Auto-fit (items stretch to fill)</h4>
          <ui-grid-system columns="auto-fit" class="demo-grid">
            @for (item of getItems(4); track $index) {
              <div class="demo-grid-item">Auto-fit {{ $index + 1 }}</div>
            }
          </ui-grid-system>
        </div>
        <div class="demo-grid-container">
          <h4>Auto-fill (creates empty columns)</h4>
          <ui-grid-system columns="auto-fill" class="demo-grid">
            @for (item of getItems(4); track $index) {
              <div class="demo-grid-item">Auto-fill {{ $index + 1 }}</div>
            }
          </ui-grid-system>
        </div>
      </section>
      
      <!-- Alignment -->
      <section class="demo-section">
        <h3>Alignment Options</h3>
        <div class="demo-row">
          <div class="demo-grid-container">
            <h4>Justify Items: Center</h4>
            <ui-grid-system [columns]="3" justifyItems="center" class="demo-grid demo-grid--fixed-height">
              @for (item of getItems(6); track $index) {
                <div class="demo-grid-item demo-grid-item--small">{{ $index + 1 }}</div>
              }
            </ui-grid-system>
          </div>
          <div class="demo-grid-container">
            <h4>Align Items: Center</h4>
            <ui-grid-system [columns]="3" alignItems="center" class="demo-grid demo-grid--fixed-height">
              @for (item of getItems(6); track $index) {
                <div class="demo-grid-item demo-grid-item--small">{{ $index + 1 }}</div>
              }
            </ui-grid-system>
          </div>
        </div>
      </section>
      
      <!-- Custom Grid -->
      <section class="demo-section">
        <h3>Custom Grid Template</h3>
        <div class="demo-grid-container">
          <h4>Custom Columns: 200px 1fr 100px</h4>
          <ui-grid-system customColumns="200px 1fr 100px" class="demo-grid">
            <div class="demo-grid-item">Fixed 200px</div>
            <div class="demo-grid-item">Flexible 1fr</div>
            <div class="demo-grid-item">Fixed 100px</div>
          </ui-grid-system>
        </div>
      </section>
      
      <!-- Responsive Grid -->
      <section class="demo-section">
        <h3>Responsive Grid</h3>
        <p>Resize the window to see responsive behavior</p>
        <ui-grid-system [columns]="12" [responsive]="true" class="demo-grid">
          @for (item of getItems(24); track $index) {
            <div class="demo-grid-item">{{ $index + 1 }}</div>
          }
        </ui-grid-system>
      </section>
    </div>
  `,
  styleUrl: './grid-system-demo.component.scss'
})
export class GridSystemDemoComponent {
  columnVariants: (1 | 2 | 3 | 4 | 6 | 12)[] = [1, 2, 3, 4, 6, 12];
  gapSizes: ('xs' | 'sm' | 'md' | 'lg' | 'xl')[] = ['xs', 'sm', 'md', 'lg', 'xl'];
  
  getItems(count: number): number[] {
    return Array.from({ length: count }, (_, i) => i + 1);
  }
  
  getItemCount(cols: number | string): number {
    if (typeof cols === 'number') {
      return Math.min(cols * 2, 12);
    }
    return 6;
  }
}