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

@Component({
  selector: 'ui-masonry-demo',
  standalone: true,
  imports: [CommonModule, MasonryComponent],
  template: `
    <div class="demo-container">
      <h2>Masonry Layout Demo</h2>
      <p>Pinterest-style dynamic grid layout that arranges items in columns with optimal vertical spacing.</p>
      
      <!-- Column Count Variants -->
      <section class="demo-section">
        <h3>Column Count</h3>
        <div class="demo-row">
          @for (columns of columnCounts; track columns) {
            <div class="demo-item">
              <h4>{{ columns }} Columns</h4>
              <ui-masonry [columns]="columns" gap="sm" padding="sm">
                @for (item of sampleItems.slice(0, 8); track item.id) {
                  <div class="ui-masonry-item ui-masonry-item--comfortable" 
                       [style.height.px]="item.height">
                    <h5>{{ item.title }}</h5>
                    <p>{{ item.content }}</p>
                  </div>
                }
              </ui-masonry>
            </div>
          }
        </div>
      </section>
      
      <!-- Auto Responsive Variants -->
      <section class="demo-section">
        <h3>Auto Responsive</h3>
        <div class="demo-row">
          <div class="demo-item">
            <h4>Auto Fit (250px min width)</h4>
            <ui-masonry columns="auto-fit" gap="md" padding="md">
              @for (item of sampleItems.slice(0, 12); track item.id) {
                <div class="ui-masonry-item ui-masonry-item--comfortable" 
                     [style.height.px]="item.height">
                  <h5>{{ item.title }}</h5>
                  <p>{{ item.content }}</p>
                </div>
              }
            </ui-masonry>
          </div>
          
          <div class="demo-item">
            <h4>Auto Fill (200px min width)</h4>
            <ui-masonry columns="auto-fill" gap="md" padding="md">
              @for (item of sampleItems.slice(0, 12); track item.id) {
                <div class="ui-masonry-item ui-masonry-item--comfortable" 
                     [style.height.px]="item.height">
                  <h5>{{ item.title }}</h5>
                  <p>{{ item.content }}</p>
                </div>
              }
            </ui-masonry>
          </div>
        </div>
      </section>
      
      <!-- Gap Variants -->
      <section class="demo-section">
        <h3>Gap Sizes</h3>
        <div class="demo-row">
          @for (gap of gaps; track gap) {
            <div class="demo-item">
              <h4>Gap: {{ gap }}</h4>
              <ui-masonry [columns]="3" [gap]="gap" padding="sm">
                @for (item of sampleItems.slice(0, 6); track item.id) {
                  <div class="ui-masonry-item ui-masonry-item--comfortable" 
                       [style.height.px]="item.height">
                    <h5>{{ item.title }}</h5>
                    <p>{{ item.content }}</p>
                  </div>
                }
              </ui-masonry>
            </div>
          }
        </div>
      </section>
      
      <!-- Padding Variants -->
      <section class="demo-section">
        <h3>Padding Options</h3>
        <div class="demo-row">
          @for (padding of paddings; track padding) {
            <div class="demo-item">
              <h4>Padding: {{ padding }}</h4>
              <ui-masonry [columns]="3" gap="sm" [padding]="padding">
                @for (item of sampleItems.slice(0, 6); track item.id) {
                  <div class="ui-masonry-item ui-masonry-item--comfortable" 
                       [style.height.px]="item.height">
                    <h5>{{ item.title }}</h5>
                    <p>{{ item.content }}</p>
                  </div>
                }
              </ui-masonry>
            </div>
          }
        </div>
      </section>
      
      <!-- Alignment Options -->
      <section class="demo-section">
        <h3>Alignment</h3>
        <div class="demo-row">
          @for (alignment of alignments; track alignment) {
            <div class="demo-item">
              <h4>Align: {{ alignment }}</h4>
              <ui-masonry [columns]="2" gap="md" padding="md" [alignment]="alignment">
                @for (item of sampleItems.slice(0, 4); track item.id) {
                  <div class="ui-masonry-item ui-masonry-item--comfortable" 
                       [style.height.px]="item.height">
                    <h5>{{ item.title }}</h5>
                    <p>{{ item.content }}</p>
                  </div>
                }
              </ui-masonry>
            </div>
          }
        </div>
      </section>
      
      <!-- Item Size Variants -->
      <section class="demo-section">
        <h3>Item Variants</h3>
        <div class="demo-row">
          <div class="demo-item">
            <h4>Mixed Item Sizes</h4>
            <ui-masonry [columns]="3" gap="md" padding="md">
              <div class="ui-masonry-item ui-masonry-item--compact" style="height: 120px;">
                <h5>Compact Item</h5>
                <p>Compact padding for dense layouts</p>
              </div>
              <div class="ui-masonry-item ui-masonry-item--comfortable" style="height: 200px;">
                <h5>Comfortable Item</h5>
                <p>Standard comfortable padding for most use cases</p>
              </div>
              <div class="ui-masonry-item ui-masonry-item--spacious" style="height: 180px;">
                <h5>Spacious Item</h5>
                <p>Extra padding for premium content</p>
              </div>
              <div class="ui-masonry-item ui-masonry-item--flush" style="height: 160px;">
                <div style="padding: 16px; background: linear-gradient(45deg, #667eea 0%, #764ba2 100%); color: white;">
                  <h5>Full Bleed Item</h5>
                  <p>No padding for full-width content</p>
                </div>
              </div>
              @for (item of sampleItems.slice(0, 6); track item.id) {
                <div class="ui-masonry-item ui-masonry-item--comfortable" 
                     [style.height.px]="item.height">
                  <h5>{{ item.title }}</h5>
                  <p>{{ item.content }}</p>
                </div>
              }
            </ui-masonry>
          </div>
        </div>
      </section>
      
      <!-- Pinterest-style Example -->
      <section class="demo-section">
        <h3>Pinterest-style Gallery</h3>
        <div class="demo-row">
          <div class="demo-item full-width">
            <ui-masonry columns="auto-fit" gap="lg" padding="lg" minColumnWidth="280px">
              @for (item of extendedItems; track item.id) {
                <div class="ui-masonry-item ui-masonry-item--comfortable" 
                     [style.height.px]="item.height"
                     [style.background]="item.background">
                  <h5 style="color: white; text-shadow: 0 1px 2px rgba(0,0,0,0.5);">{{ item.title }}</h5>
                  <p style="color: rgba(255,255,255,0.9); text-shadow: 0 1px 2px rgba(0,0,0,0.3);">{{ item.content }}</p>
                </div>
              }
            </ui-masonry>
          </div>
        </div>
      </section>
      
    </div>
  `,
  styleUrl: './masonry-demo.component.scss'
})
export class MasonryDemoComponent {
  columnCounts = [2, 3, 4] as const;
  gaps = ['sm', 'md', 'lg'] as const;
  paddings = ['none', 'sm', 'md', 'lg'] as const;
  alignments = ['start', 'center', 'end'] as const;
  
  sampleItems = [
    { id: 1, title: 'Card 1', content: 'Short content', height: 120 },
    { id: 2, title: 'Card 2', content: 'Medium length content with more details', height: 180 },
    { id: 3, title: 'Card 3', content: 'Brief', height: 100 },
    { id: 4, title: 'Card 4', content: 'Longer content with multiple lines of text to demonstrate variable heights', height: 220 },
    { id: 5, title: 'Card 5', content: 'Standard content', height: 140 },
    { id: 6, title: 'Card 6', content: 'Extended content with even more text to show how masonry handles varying content lengths', height: 260 },
    { id: 7, title: 'Card 7', content: 'Compact', height: 90 },
    { id: 8, title: 'Card 8', content: 'Regular content block', height: 160 },
    { id: 9, title: 'Card 9', content: 'Another piece of content', height: 130 },
    { id: 10, title: 'Card 10', content: 'Different sized content', height: 200 },
    { id: 11, title: 'Card 11', content: 'Small content', height: 110 },
    { id: 12, title: 'Card 12', content: 'Large content with lots of text and information', height: 240 }
  ];
  
  extendedItems = [
    { id: 1, title: 'Ocean Waves', content: 'Beautiful ocean scenery with crashing waves', height: 180, background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)' },
    { id: 2, title: 'Mountain Vista', content: 'Majestic mountain range at sunset', height: 220, background: 'linear-gradient(135deg, #f093fb 0%, #f5576c 100%)' },
    { id: 3, title: 'Forest Path', content: 'Winding path through dense forest', height: 160, background: 'linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)' },
    { id: 4, title: 'Desert Dunes', content: 'Golden sand dunes stretching to horizon', height: 200, background: 'linear-gradient(135deg, #43e97b 0%, #38f9d7 100%)' },
    { id: 5, title: 'City Skyline', content: 'Modern city with glowing lights', height: 140, background: 'linear-gradient(135deg, #fa709a 0%, #fee140 100%)' },
    { id: 6, title: 'Northern Lights', content: 'Aurora borealis dancing across night sky', height: 250, background: 'linear-gradient(135deg, #a8edea 0%, #fed6e3 100%)' },
    { id: 7, title: 'Tropical Beach', content: 'Palm trees and crystal clear water', height: 180, background: 'linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%)' },
    { id: 8, title: 'Snow Peaks', content: 'Snow-capped mountain peaks', height: 190, background: 'linear-gradient(135deg, #a1c4fd 0%, #c2e9fb 100%)' },
    { id: 9, title: 'Autumn Leaves', content: 'Colorful fall foliage', height: 170, background: 'linear-gradient(135deg, #fad0c4 0%, #fad0c4 1%, #ffd1ff 100%)' },
    { id: 10, title: 'Starry Night', content: 'Countless stars in clear night sky', height: 210, background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)' },
    { id: 11, title: 'Wildflowers', content: 'Field of colorful wildflowers', height: 150, background: 'linear-gradient(135deg, #ff9a9e 0%, #fecfef 50%, #fecfef 100%)' },
    { id: 12, title: 'Waterfall', content: 'Powerful waterfall cascading down rocks', height: 230, background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)' }
  ];
}