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

@Component({
  selector: 'ui-flex-demo',
  standalone: true,
  imports: [CommonModule, FlexComponent],
  template: `
    <div class="demo-container">
      <h2>Flex Component Demo</h2>
      
      <!-- Direction Examples -->
      <section class="demo-section">
        <h3>Flex Direction</h3>
        <div class="demo-row">
          @for (direction of directions; track direction) {
            <div class="demo-column">
              <h4>direction="{{ direction }}"</h4>
              <ui-flex [direction]="direction" class="flex-demo">
                <div class="flex-item">1</div>
                <div class="flex-item">2</div>
                <div class="flex-item">3</div>
              </ui-flex>
            </div>
          }
        </div>
      </section>
      
      <!-- Justify Content -->
      <section class="demo-section">
        <h3>Justify Content</h3>
        <div class="demo-column">
          @for (justify of justifyOptions; track justify) {
            <div class="justify-example">
              <h4>justify="{{ justify }}"</h4>
              <ui-flex [justify]="justify" class="justify-demo">
                <div class="flex-item">A</div>
                <div class="flex-item">B</div>
                <div class="flex-item">C</div>
              </ui-flex>
            </div>
          }
        </div>
      </section>
      
      <!-- Align Items -->
      <section class="demo-section">
        <h3>Align Items</h3>
        <div class="demo-row">
          @for (align of alignOptions; track align) {
            <div class="demo-column">
              <h4>align="{{ align }}"</h4>
              <ui-flex [align]="align" class="align-demo">
                <div class="flex-item flex-item--small">Small</div>
                <div class="flex-item flex-item--medium">Medium</div>
                <div class="flex-item flex-item--large">Large item with more content</div>
              </ui-flex>
            </div>
          }
        </div>
      </section>
      
      <!-- Wrap Options -->
      <section class="demo-section">
        <h3>Flex Wrap</h3>
        <div class="demo-column">
          @for (wrapOption of wrapOptions; track wrapOption) {
            <div class="wrap-example">
              <h4>wrap="{{ wrapOption }}"</h4>
              <ui-flex [wrap]="wrapOption" class="wrap-demo">
                @for (item of manyItems; track item) {
                  <div class="flex-item flex-item--fixed">{{ item }}</div>
                }
              </ui-flex>
            </div>
          }
        </div>
      </section>
      
      <!-- Gap Examples -->
      <section class="demo-section">
        <h3>Gap Spacing</h3>
        <div class="demo-row">
          @for (gap of gapSizes; track gap) {
            <div class="demo-column">
              <h4>gap="{{ gap }}"</h4>
              <ui-flex [gap]="gap" class="gap-demo">
                <div class="flex-item">1</div>
                <div class="flex-item">2</div>
                <div class="flex-item">3</div>
              </ui-flex>
            </div>
          }
        </div>
      </section>
      
      <!-- Complex Layout Examples -->
      <section class="demo-section">
        <h3>Complex Layout Examples</h3>
        
        <!-- Centered Card -->
        <div class="complex-example">
          <h4>Centered Card Layout</h4>
          <ui-flex justify="center" align="center" class="centered-container">
            <div class="card">
              <h5>Centered Card</h5>
              <p>This card is perfectly centered using flexbox.</p>
            </div>
          </ui-flex>
        </div>
        
        <!-- Navigation Layout -->
        <div class="complex-example">
          <h4>Navigation Layout</h4>
          <ui-flex justify="between" align="center" class="nav-demo">
            <div class="nav-brand">Brand</div>
            <ui-flex gap="md" align="center">
              <div class="nav-item">Home</div>
              <div class="nav-item">About</div>
              <div class="nav-item">Contact</div>
            </ui-flex>
          </ui-flex>
        </div>
        
        <!-- Responsive Grid Alternative -->
        <div class="complex-example">
          <h4>Responsive Card Grid</h4>
          <ui-flex wrap="wrap" gap="lg" class="card-grid">
            @for (card of cards; track card.id) {
              <div class="grid-card">
                <h6>{{ card.title }}</h6>
                <p>{{ card.content }}</p>
              </div>
            }
          </ui-flex>
        </div>
        
        <!-- Sidebar Layout -->
        <div class="complex-example">
          <h4>Sidebar Layout</h4>
          <ui-flex class="sidebar-layout">
            <div class="sidebar">Sidebar</div>
            <div class="main-content">
              <h6>Main Content</h6>
              <p>This is the main content area that grows to fill the available space.</p>
            </div>
          </ui-flex>
        </div>
      </section>
      
      <!-- Size Variants -->
      <section class="demo-section">
        <h3>Size Variants</h3>
        <div class="demo-column">
          <div class="size-example">
            <h4>Full Width</h4>
            <ui-flex [fullWidth]="true" class="size-demo">
              <div class="flex-item">Full Width Container</div>
            </ui-flex>
          </div>
          
          <div class="size-example">
            <h4>Inline Flex</h4>
            <div>
              Before text 
              <ui-flex [inline]="true" gap="sm" class="inline-flex-demo">
                <div class="flex-item flex-item--inline">A</div>
                <div class="flex-item flex-item--inline">B</div>
              </ui-flex>
              After text
            </div>
          </div>
        </div>
      </section>
    </div>
  `,
  styleUrl: './flex-demo.component.scss'
})
export class FlexDemoComponent {
  directions = ['row', 'row-reverse', 'column', 'column-reverse'] as const;
  justifyOptions = ['start', 'end', 'center', 'between', 'around', 'evenly'] as const;
  alignOptions = ['start', 'end', 'center', 'baseline', 'stretch'] as const;
  wrapOptions = ['nowrap', 'wrap', 'wrap-reverse'] as const;
  gapSizes = ['xs', 'sm', 'md', 'lg', 'xl'] as const;
  
  manyItems = Array.from({ length: 12 }, (_, i) => `Item ${i + 1}`);
  
  cards = [
    { id: 1, title: 'Card 1', content: 'This is the first card with some content.' },
    { id: 2, title: 'Card 2', content: 'This is the second card with different content.' },
    { id: 3, title: 'Card 3', content: 'This is the third card with more content.' },
    { id: 4, title: 'Card 4', content: 'This is the fourth card with additional content.' },
    { id: 5, title: 'Card 5', content: 'This is the fifth card with extra content.' },
    { id: 6, title: 'Card 6', content: 'This is the sixth card with final content.' },
  ];
}