import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { BentoGridComponent, BentoGridItemComponent } from 'ui-essentials';

@Component({
  selector: 'ui-bento-grid-demo',
  standalone: true,
  imports: [CommonModule, BentoGridComponent, BentoGridItemComponent],
  template: `
    <div class="demo-container">
      <h2>Bento Grid Demo</h2>
      
      <!-- Basic Grid -->
      <section class="demo-section">
        <h3>Basic Bento Grid</h3>
        <ui-bento-grid columns="auto-fit-md" gap="md">
          <ui-bento-grid-item header="Regular Item">
            Basic grid item with regular content.
          </ui-bento-grid-item>
          
          <ui-bento-grid-item featured="md" header="Featured Item" variant="primary">
            This is a featured item that spans 2 columns and 2 rows.
          </ui-bento-grid-item>
          
          <ui-bento-grid-item>
            Another regular item without header.
          </ui-bento-grid-item>
          
          <ui-bento-grid-item [colSpan]="2" variant="elevated" header="Wide Item">
            This item spans 2 columns wide.
          </ui-bento-grid-item>
          
          <ui-bento-grid-item [rowSpan]="2" variant="secondary" header="Tall Item">
            This item spans 2 rows tall.
          </ui-bento-grid-item>
          
          <ui-bento-grid-item>Regular item</ui-bento-grid-item>
          <ui-bento-grid-item>Regular item</ui-bento-grid-item>
          
          <ui-bento-grid-item featured="lg" header="Large Featured" variant="elevated">
            Large featured item spanning 3 columns and 2 rows.
          </ui-bento-grid-item>
          
          <ui-bento-grid-item>Regular item</ui-bento-grid-item>
          <ui-bento-grid-item>Regular item</ui-bento-grid-item>
        </ui-bento-grid>
      </section>
      
      <!-- Fixed Columns -->
      <section class="demo-section">
        <h3>Fixed Column Grids</h3>
        
        <h4>4 Columns</h4>
        <ui-bento-grid [columns]="4" gap="sm">
          <ui-bento-grid-item>Item 1</ui-bento-grid-item>
          <ui-bento-grid-item [colSpan]="2">Item 2 (2 cols)</ui-bento-grid-item>
          <ui-bento-grid-item>Item 3</ui-bento-grid-item>
          <ui-bento-grid-item>Item 4</ui-bento-grid-item>
          <ui-bento-grid-item [colSpan]="3">Item 5 (3 cols)</ui-bento-grid-item>
          <ui-bento-grid-item>Item 6</ui-bento-grid-item>
        </ui-bento-grid>
        
        <h4>6 Columns</h4>
        <ui-bento-grid [columns]="6" gap="xs">
          @for (item of sixColumnItems; track item.id) {
            <ui-bento-grid-item 
              [colSpan]="item.colSpan" 
              [rowSpan]="item.rowSpan"
              [variant]="item.variant"
              [header]="item.header">
              {{ item.content }}
            </ui-bento-grid-item>
          }
        </ui-bento-grid>
      </section>
      
      <!-- Gap Variants -->
      <section class="demo-section">
        <h3>Gap Sizes</h3>
        <div class="demo-row">
          @for (gap of gaps; track gap) {
            <div class="demo-variant">
              <h4>Gap: {{ gap }}</h4>
              <ui-bento-grid [columns]="3" [gap]="gap">
                <ui-bento-grid-item>Item A</ui-bento-grid-item>
                <ui-bento-grid-item>Item B</ui-bento-grid-item>
                <ui-bento-grid-item>Item C</ui-bento-grid-item>
                <ui-bento-grid-item [colSpan]="2">Item D (2 cols)</ui-bento-grid-item>
                <ui-bento-grid-item>Item E</ui-bento-grid-item>
              </ui-bento-grid>
            </div>
          }
        </div>
      </section>
      
      <!-- Featured Sizes -->
      <section class="demo-section">
        <h3>Featured Item Sizes</h3>
        <ui-bento-grid columns="auto-fit-md" gap="md">
          <ui-bento-grid-item featured="sm" variant="primary" header="Small Featured">
            2×1 featured item
          </ui-bento-grid-item>
          
          <ui-bento-grid-item>Regular</ui-bento-grid-item>
          <ui-bento-grid-item>Regular</ui-bento-grid-item>
          
          <ui-bento-grid-item featured="md" variant="secondary" header="Medium Featured">
            2×2 featured item
          </ui-bento-grid-item>
          
          <ui-bento-grid-item>Regular</ui-bento-grid-item>
          <ui-bento-grid-item>Regular</ui-bento-grid-item>
          <ui-bento-grid-item>Regular</ui-bento-grid-item>
          
          <ui-bento-grid-item featured="lg" variant="elevated" header="Large Featured">
            3×2 featured item
          </ui-bento-grid-item>
          
          <ui-bento-grid-item>Regular</ui-bento-grid-item>
          <ui-bento-grid-item>Regular</ui-bento-grid-item>
        </ui-bento-grid>
      </section>
      
      <!-- Interactive Items -->
      <section class="demo-section">
        <h3>Interactive Items</h3>
        <ui-bento-grid columns="auto-fit-md" gap="md">
          <ui-bento-grid-item 
            [interactive]="true" 
            variant="primary"
            header="Click Me!"
            (clicked)="handleItemClick('primary')">
            Interactive primary item
          </ui-bento-grid-item>
          
          <ui-bento-grid-item 
            [interactive]="true"
            [colSpan]="2"
            variant="secondary"
            header="Wide Interactive"
            (clicked)="handleItemClick('secondary')">
            Wide interactive item
          </ui-bento-grid-item>
          
          <ui-bento-grid-item 
            [interactive]="true"
            featured="md"
            variant="elevated"
            header="Featured Interactive"
            (clicked)="handleItemClick('featured')">
            Featured interactive item
          </ui-bento-grid-item>
          
          <ui-bento-grid-item>Static item</ui-bento-grid-item>
          <ui-bento-grid-item>Static item</ui-bento-grid-item>
        </ui-bento-grid>
        
        @if (lastClicked) {
          <p>Last clicked: <strong>{{ lastClicked }}</strong></p>
        }
      </section>
      
      <!-- Row Height Variants -->
      <section class="demo-section">
        <h3>Row Heights</h3>
        <div class="demo-row">
          @for (rowHeight of rowHeights; track rowHeight) {
            <div class="demo-variant">
              <h4>Rows: {{ rowHeight }}</h4>
              <ui-bento-grid [columns]="3" [rowHeight]="rowHeight" gap="sm">
                <ui-bento-grid-item>Small content</ui-bento-grid-item>
                <ui-bento-grid-item>
                  Longer content that might need more space depending on the row height setting.
                </ui-bento-grid-item>
                <ui-bento-grid-item [rowSpan]="2">Tall item</ui-bento-grid-item>
                <ui-bento-grid-item [colSpan]="2">Wide item</ui-bento-grid-item>
              </ui-bento-grid>
            </div>
          }
        </div>
      </section>
    </div>
  `,
  styleUrl: './bento-grid-demo.component.scss'
})
export class BentoGridDemoComponent {
  gaps = ['xs', 'sm', 'md', 'lg'] as const;
  rowHeights = ['sm', 'md', 'lg'] as const;
  lastClicked = '';
  
  sixColumnItems = [
    { id: 1, colSpan: 2, rowSpan: 1, variant: 'primary', header: 'Wide', content: '2×1 item' },
    { id: 2, colSpan: 1, rowSpan: 2, variant: 'secondary', header: 'Tall', content: '1×2 item' },
    { id: 3, colSpan: 1, rowSpan: 1, variant: 'default', header: '', content: 'Regular' },
    { id: 4, colSpan: 2, rowSpan: 1, variant: 'elevated', header: 'Featured', content: '2×1 item' },
    { id: 5, colSpan: 1, rowSpan: 1, variant: 'default', header: '', content: 'Regular' },
    { id: 6, colSpan: 3, rowSpan: 1, variant: 'primary', header: 'Extra Wide', content: '3×1 item' },
    { id: 7, colSpan: 1, rowSpan: 1, variant: 'default', header: '', content: 'Regular' },
    { id: 8, colSpan: 2, rowSpan: 2, variant: 'elevated', header: 'Large', content: '2×2 featured' },
    { id: 9, colSpan: 1, rowSpan: 1, variant: 'default', header: '', content: 'Regular' },
    { id: 10, colSpan: 1, rowSpan: 1, variant: 'default', header: '', content: 'Regular' },
  ] as const;
  
  handleItemClick(type: string): void {
    this.lastClicked = type;
    console.log('Bento grid item clicked:', type);
  }
}