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

@Component({
  selector: 'ui-spacer-demo',
  standalone: true,
  imports: [CommonModule, SpacerComponent],
  template: `
    <div class="demo-container">
      <h2>Spacer Demo</h2>
      
      <!-- Size Variants -->
      <section class="demo-section">
        <h3>Size Variants</h3>
        <p>Spacers with debug mode enabled to show spacing</p>
        <div class="demo-row">
          @for (size of sizes; track size) {
            <div class="demo-spacer-container">
              <div class="demo-label">{{ size }}</div>
              <div class="demo-box">A</div>
              <ui-spacer [size]="size" [debug]="true"></ui-spacer>
              <div class="demo-box">B</div>
            </div>
          }
        </div>
      </section>
      
      <!-- Directional Variants -->
      <section class="demo-section">
        <h3>Directional Spacing</h3>
        
        <div class="demo-grid">
          <div class="demo-direction-container">
            <h4>Horizontal Spacing</h4>
            <div class="demo-horizontal-container">
              <div class="demo-box">Left</div>
              <ui-spacer size="lg" direction="horizontal" [debug]="true"></ui-spacer>
              <div class="demo-box">Right</div>
            </div>
          </div>
          
          <div class="demo-direction-container">
            <h4>Vertical Spacing</h4>
            <div class="demo-vertical-container">
              <div class="demo-box">Top</div>
              <ui-spacer size="lg" direction="vertical" [debug]="true"></ui-spacer>
              <div class="demo-box">Bottom</div>
            </div>
          </div>
        </div>
      </section>
      
      <!-- Component Variants -->
      <section class="demo-section">
        <h3>Component Spacing Variants</h3>
        <p>Semantic spacing tokens for different component contexts</p>
        <div class="demo-row">
          @for (variant of componentVariants; track variant) {
            <div class="demo-spacer-container">
              <div class="demo-label">{{ variant }}</div>
              <div class="demo-box">A</div>
              <ui-spacer [variant]="variant" [debug]="true"></ui-spacer>
              <div class="demo-box">B</div>
            </div>
          }
        </div>
      </section>
      
      <!-- Layout Variants -->
      <section class="demo-section">
        <h3>Layout Spacing Variants</h3>
        <p>Semantic spacing tokens for layout elements</p>
        <div class="demo-row">
          @for (variant of layoutVariants; track variant) {
            <div class="demo-spacer-container">
              <div class="demo-label">{{ variant }}</div>
              <div class="demo-box">Section A</div>
              <ui-spacer [variant]="variant" [debug]="true"></ui-spacer>
              <div class="demo-box">Section B</div>
            </div>
          }
        </div>
      </section>
      
      <!-- Flexible Spacer -->
      <section class="demo-section">
        <h3>Flexible Spacer</h3>
        <p>Spacer that grows to fill available space</p>
        
        <div class="demo-flex-container">
          <h4>Horizontal Flexible</h4>
          <div class="demo-flex-row">
            <div class="demo-box">Left</div>
            <ui-spacer direction="horizontal" [flexible]="true" [debug]="true"></ui-spacer>
            <div class="demo-box">Right</div>
          </div>
        </div>
        
        <div class="demo-flex-container">
          <h4>Vertical Flexible</h4>
          <div class="demo-flex-column">
            <div class="demo-box">Top</div>
            <ui-spacer direction="vertical" [flexible]="true" [debug]="true"></ui-spacer>
            <div class="demo-box">Bottom</div>
          </div>
        </div>
      </section>
      
      <!-- Custom Spacing -->
      <section class="demo-section">
        <h3>Custom Spacing</h3>
        <div class="demo-row">
          <div class="demo-spacer-container">
            <div class="demo-label">Custom Width: 100px</div>
            <div class="demo-horizontal-container">
              <div class="demo-box">A</div>
              <ui-spacer customWidth="100px" direction="horizontal" [debug]="true"></ui-spacer>
              <div class="demo-box">B</div>
            </div>
          </div>
          
          <div class="demo-spacer-container">
            <div class="demo-label">Custom Height: 80px</div>
            <div class="demo-vertical-container">
              <div class="demo-box">Top</div>
              <ui-spacer customHeight="80px" direction="vertical" [debug]="true"></ui-spacer>
              <div class="demo-box">Bottom</div>
            </div>
          </div>
        </div>
      </section>
      
      <!-- Real World Examples -->
      <section class="demo-section">
        <h3>Real World Usage</h3>
        
        <div class="demo-card">
          <h4>Card Layout with Spacers</h4>
          <div class="demo-card-header">Header Content</div>
          <ui-spacer variant="component-md"></ui-spacer>
          <div class="demo-card-content">Main content goes here with proper spacing</div>
          <ui-spacer variant="component-sm"></ui-spacer>
          <div class="demo-card-actions">
            <button class="demo-button">Cancel</button>
            <ui-spacer direction="horizontal" [flexible]="true"></ui-spacer>
            <button class="demo-button demo-button--primary">Save</button>
          </div>
        </div>
      </section>
    </div>
  `,
  styleUrl: './spacer-demo.component.scss'
})
export class SpacerDemoComponent {
  sizes: ('xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl')[] = ['xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl'];
  componentVariants: ('component-xs' | 'component-sm' | 'component-md' | 'component-lg' | 'component-xl')[] = [
    'component-xs', 'component-sm', 'component-md', 'component-lg', 'component-xl'
  ];
  layoutVariants: ('layout-xs' | 'layout-sm' | 'layout-md' | 'layout-lg' | 'layout-xl')[] = [
    'layout-xs', 'layout-sm', 'layout-md', 'layout-lg', 'layout-xl'
  ];
}