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

@Component({
  selector: 'ui-container-demo',
  standalone: true,
  imports: [CommonModule, ContainerComponent, GridSystemComponent],
  template: `
    <div class="demo-wrapper">
      <h2>Container Demo</h2>
      
      <!-- Size Variants -->
      <section class="demo-section">
        <h3>Size Variants</h3>
        <div class="demo-containers-showcase">
          @for (size of sizes; track size) {
            <div class="demo-container-wrapper">
              <div class="demo-label">{{ size }} (max-width: {{ getMaxWidth(size) }})</div>
              <ui-container [size]="size" class="demo-container-outline">
                <div class="demo-content">{{ size }} container content</div>
              </ui-container>
            </div>
          }
        </div>
      </section>
      
      <!-- Variant Types -->
      <section class="demo-section">
        <h3>Container Variants</h3>
        
        <div class="demo-variant-grid">
          <div class="demo-variant-item">
            <h4>Default Container</h4>
            <ui-container size="md" class="demo-container-outline">
              <div class="demo-content">Basic container with standard padding and centering</div>
            </ui-container>
          </div>
          
          <div class="demo-variant-item">
            <h4>Card Container</h4>
            <ui-container size="md" variant="card">
              <div class="demo-content">Card-style container with background, border, and shadow</div>
            </ui-container>
          </div>
          
          <div class="demo-variant-item">
            <h4>Section Container</h4>
            <ui-container size="lg" variant="section" background="surface">
              <div class="demo-content">Section container with larger vertical padding for page sections</div>
            </ui-container>
          </div>
          
          <div class="demo-variant-item">
            <h4>Hero Container</h4>
            <ui-container size="xl" variant="hero" background="surface-elevated">
              <div class="demo-content hero-content">
                <h2>Hero Section</h2>
                <p>Large padding and centered content for hero sections</p>
              </div>
            </ui-container>
          </div>
        </div>
      </section>
      
      <!-- Flex Containers -->
      <section class="demo-section">
        <h3>Flex Container Variants</h3>
        
        <div class="demo-variant-grid">
          <div class="demo-variant-item">
            <h4>Flex Column (Default)</h4>
            <ui-container size="sm" variant="flex" class="demo-container-outline">
              <div class="demo-flex-item">Item 1</div>
              <div class="demo-flex-item">Item 2</div>
              <div class="demo-flex-item">Item 3</div>
            </ui-container>
          </div>
          
          <div class="demo-variant-item">
            <h4>Flex Row</h4>
            <ui-container size="sm" variant="flex" flexDirection="row" class="demo-container-outline">
              <div class="demo-flex-item">Item 1</div>
              <div class="demo-flex-item">Item 2</div>
              <div class="demo-flex-item">Item 3</div>
            </ui-container>
          </div>
          
          <div class="demo-variant-item">
            <h4>Flex Center</h4>
            <ui-container size="sm" variant="flex" flexJustify="center" class="demo-container-outline demo-container-tall">
              <div class="demo-flex-item">Centered</div>
              <div class="demo-flex-item">Content</div>
            </ui-container>
          </div>
          
          <div class="demo-variant-item">
            <h4>Flex Space Between</h4>
            <ui-container size="sm" variant="flex" flexDirection="row" flexJustify="between" class="demo-container-outline">
              <div class="demo-flex-item">Start</div>
              <div class="demo-flex-item">End</div>
            </ui-container>
          </div>
        </div>
      </section>
      
      <!-- Grid Containers -->
      <section class="demo-section">
        <h3>Grid Container Variants</h3>
        
        <div class="demo-variant-grid">
          <div class="demo-variant-item">
            <h4>Grid Auto</h4>
            <ui-container size="lg" variant="grid" gridColumns="auto" class="demo-container-outline">
              @for (item of getGridItems(6); track $index) {
                <div class="demo-grid-item">{{ item }}</div>
              }
            </ui-container>
          </div>
          
          <div class="demo-variant-item">
            <h4>Grid 3 Columns</h4>
            <ui-container size="lg" variant="grid" [gridColumns]="3" class="demo-container-outline">
              @for (item of getGridItems(6); track $index) {
                <div class="demo-grid-item">{{ item }}</div>
              }
            </ui-container>
          </div>
        </div>
      </section>
      
      <!-- Padding Variants -->
      <section class="demo-section">
        <h3>Padding Variants</h3>
        
        <div class="demo-variant-grid">
          @for (padding of paddingSizes; track padding) {
            <div class="demo-variant-item">
              <h4>Padding: {{ padding }}</h4>
              <ui-container size="sm" [padding]="padding" class="demo-container-outline">
                <div class="demo-content">{{ padding }} padding content</div>
              </ui-container>
            </div>
          }
        </div>
      </section>
      
      <!-- Background Variants -->
      <section class="demo-section">
        <h3>Background Variants</h3>
        
        <div class="demo-variant-grid">
          @for (bg of backgrounds; track bg) {
            <div class="demo-variant-item">
              <h4>Background: {{ bg }}</h4>
              <ui-container size="sm" [background]="bg" padding="md" class="demo-container-outline">
                <div class="demo-content">{{ bg }} background</div>
              </ui-container>
            </div>
          }
        </div>
      </section>
      
      <!-- Scrollable Container -->
      <section class="demo-section">
        <h3>Scrollable Containers</h3>
        
        <div class="demo-variant-grid">
          <div class="demo-variant-item">
            <h4>Vertical Scroll</h4>
            <ui-container size="sm" scrollable="y" customMaxHeight="200px" variant="card">
              @for (item of getLongContent(); track $index) {
                <p class="demo-paragraph">{{ item }}</p>
              }
            </ui-container>
          </div>
          
          <div class="demo-variant-item">
            <h4>Horizontal Scroll</h4>
            <ui-container size="sm" scrollable="x" variant="card">
              <div class="demo-wide-content">
                This is a very long line of content that will cause horizontal scrolling when it exceeds the container width. Keep reading to see the scroll behavior in action.
              </div>
            </ui-container>
          </div>
        </div>
      </section>
      
      <!-- Real World Example -->
      <section class="demo-section">
        <h3>Real World Example</h3>
        <ui-container size="lg" variant="section" background="surface">
          <ui-container size="md" variant="centered">
            <h2>Product Features</h2>
            <p>Discover what makes our product special</p>
            
            <ui-container variant="grid" [gridColumns]="3" customMaxWidth="800px">
              @for (feature of features; track feature.title) {
                <ui-container variant="card" padding="md">
                  <h3>{{ feature.title }}</h3>
                  <p>{{ feature.description }}</p>
                </ui-container>
              }
            </ui-container>
          </ui-container>
        </ui-container>
      </section>
    </div>
  `,
  styleUrl: './container-demo.component.scss'
})
export class ContainerDemoComponent {
  sizes: ('xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full')[] = ['xs', 'sm', 'md', 'lg', 'xl', '2xl', 'full'];
  paddingSizes: ('xs' | 'sm' | 'md' | 'lg' | 'xl' | 'none')[] = ['xs', 'sm', 'md', 'lg', 'xl', 'none'];
  backgrounds: ('transparent' | 'surface' | 'surface-secondary' | 'surface-elevated')[] = [
    'transparent', 'surface', 'surface-secondary', 'surface-elevated'
  ];
  
  features = [
    { title: 'Fast', description: 'Lightning-fast performance optimized for speed' },
    { title: 'Secure', description: 'Enterprise-grade security built from the ground up' },
    { title: 'Scalable', description: 'Grows with your business needs seamlessly' },
    { title: 'Reliable', description: '99.9% uptime guaranteed with redundant systems' },
    { title: 'Easy to Use', description: 'Intuitive interface designed for productivity' },
    { title: 'Supported', description: '24/7 customer support when you need it' }
  ];
  
  getMaxWidth(size: string): string {
    const sizes: Record<string, string> = {
      'xs': '475px',
      'sm': '640px', 
      'md': '768px',
      'lg': '1024px',
      'xl': '1280px',
      '2xl': '1536px',
      'full': 'none'
    };
    return sizes[size] || 'auto';
  }
  
  getGridItems(count: number): string[] {
    return Array.from({ length: count }, (_, i) => `Item ${i + 1}`);
  }
  
  getLongContent(): string[] {
    return [
      'This is paragraph 1 with some content to demonstrate vertical scrolling.',
      'This is paragraph 2 with more content to show how the container handles overflow.',
      'This is paragraph 3 continuing the demonstration of scrollable content.',
      'This is paragraph 4 adding even more content to ensure scrolling is needed.',
      'This is paragraph 5 with the final bit of content to complete the demo.',
      'This is paragraph 6 making sure we have enough content for scroll.',
      'This is paragraph 7 - almost done with our scrollable content demo.',
      'This is paragraph 8 - the last paragraph in our scrollable demo.'
    ];
  }
}