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

@Component({
  selector: 'ui-sticky-layout-demo',
  standalone: true,
  imports: [CommonModule, FormsModule, StickyLayoutComponent],
  template: `
    <div class="demo-container">
      <h2>Sticky Layout Demo</h2>
      <p>Scroll down to see the sticky positioning in action.</p>
      
      <!-- Position Variants -->
      <section class="demo-section">
        <h3>Position Variants</h3>
        <div class="demo-scroll-container">
          <ui-sticky-layout position="top" variant="header" [shadow]="true">
            <div class="demo-content">Sticky Top Header</div>
          </ui-sticky-layout>
          
          <div class="demo-content-spacer">
            <p>Scroll down to see sticky positioning...</p>
            <div class="demo-filler">Content area 1</div>
            <div class="demo-filler">Content area 2</div>
            <div class="demo-filler">Content area 3</div>
            <div class="demo-filler">Content area 4</div>
            <div class="demo-filler">Content area 5</div>
          </div>
          
          <ui-sticky-layout position="bottom" variant="footer" [shadow]="true">
            <div class="demo-content">Sticky Bottom Footer</div>
          </ui-sticky-layout>
        </div>
      </section>
      
      <!-- Variant Styles -->
      <section class="demo-section">
        <h3>Variant Styles</h3>
        <div class="demo-grid">
          @for (variant of variants; track variant.name) {
            <div class="demo-variant-example">
              <h4>{{ variant.name }}</h4>
              <ui-sticky-layout 
                [position]="variant.position"
                [variant]="variant.variant"
                [shadow]="variant.shadow"
                [background]="variant.background">
                <div class="demo-content-small">
                  {{ variant.name }} Sticky
                </div>
              </ui-sticky-layout>
            </div>
          }
        </div>
      </section>
      
      <!-- Offset Examples -->
      <section class="demo-section">
        <h3>Offset Variants</h3>
        <div class="demo-row">
          @for (offset of offsets; track offset) {
            <ui-sticky-layout 
              position="top" 
              [offset]="offset"
              variant="toolbar"
              [shadow]="true">
              <div class="demo-content-small">
                Offset: {{ offset }}
              </div>
            </ui-sticky-layout>
          }
        </div>
      </section>
      
      <!-- Background and Effects -->
      <section class="demo-section">
        <h3>Background & Effects</h3>
        <div class="demo-grid">
          <div class="demo-effect-example">
            <h4>Blur Effect</h4>
            <ui-sticky-layout 
              position="top" 
              background="surface"
              [blur]="true"
              [shadow]="true">
              <div class="demo-content-small">Blurred Background</div>
            </ui-sticky-layout>
          </div>
          
          <div class="demo-effect-example">
            <h4>Backdrop</h4>
            <ui-sticky-layout 
              position="top" 
              background="backdrop"
              [border]="true">
              <div class="demo-content-small">Backdrop Filter</div>
            </ui-sticky-layout>
          </div>
          
          <div class="demo-effect-example">
            <h4>Floating</h4>
            <ui-sticky-layout 
              position="top"
              variant="floating"
              offset="md">
              <div class="demo-content-small">Floating Style</div>
            </ui-sticky-layout>
          </div>
          
          <div class="demo-effect-example">
            <h4>Toolbar</h4>
            <ui-sticky-layout 
              position="top"
              variant="toolbar"
              [shadow]="true"
              [border]="true">
              <div class="demo-content-small">Toolbar Style</div>
            </ui-sticky-layout>
          </div>
        </div>
      </section>
      
      <!-- Size Variants -->
      <section class="demo-section">
        <h3>Size Variants</h3>
        <div class="demo-row">
          @for (size of sizes; track size) {
            <ui-sticky-layout 
              position="top"
              [size]="size"
              variant="header"
              [shadow]="true">
              <div class="demo-content-small">
                Size: {{ size }}
              </div>
            </ui-sticky-layout>
          }
        </div>
      </section>
      
      <!-- Interactive Example -->
      <section class="demo-section">
        <h3>Interactive Example</h3>
        <div class="demo-controls">
          <label>
            Position:
            <select [(ngModel)]="selectedPosition" (change)="updateConfig()">
              @for (pos of positions; track pos) {
                <option [value]="pos">{{ pos }}</option>
              }
            </select>
          </label>
          
          <label>
            Variant:
            <select [(ngModel)]="selectedVariant" (change)="updateConfig()">
              @for (variant of variantOptions; track variant) {
                <option [value]="variant">{{ variant }}</option>
              }
            </select>
          </label>
          
          <label>
            <input type="checkbox" [(ngModel)]="enableShadow" (change)="updateConfig()">
            Shadow
          </label>
          
          <label>
            <input type="checkbox" [(ngModel)]="enableBorder" (change)="updateConfig()">
            Border
          </label>
          
          <label>
            <input type="checkbox" [(ngModel)]="enableBlur" (change)="updateConfig()">
            Blur
          </label>
        </div>
        
        <div class="demo-preview">
          <ui-sticky-layout 
            [position]="selectedPosition"
            [variant]="selectedVariant"
            [shadow]="enableShadow"
            [border]="enableBorder"
            [blur]="enableBlur"
            background="surface">
            <div class="demo-content">
              Dynamic Sticky Layout
            </div>
          </ui-sticky-layout>
        </div>
      </section>
    </div>
  `,
  styleUrl: './sticky-layout-demo.component.scss'
})
export class StickyLayoutDemoComponent {
  positions = ['top', 'bottom', 'left', 'right'] as const;
  offsets = ['xs', 'sm', 'md', 'lg', 'xl'] as const;
  sizes = ['auto', 'full', 'content'] as const;
  variantOptions = ['default', 'header', 'sidebar', 'footer', 'floating', 'toolbar'] as const;
  
  variants = [
    { name: 'Header', variant: 'header' as const, position: 'top' as const, shadow: true, background: 'surface' as const },
    { name: 'Sidebar', variant: 'sidebar' as const, position: 'left' as const, shadow: false, background: 'surface-secondary' as const },
    { name: 'Footer', variant: 'footer' as const, position: 'bottom' as const, shadow: true, background: 'surface' as const },
    { name: 'Floating', variant: 'floating' as const, position: 'top' as const, shadow: true, background: 'surface-elevated' as const },
    { name: 'Toolbar', variant: 'toolbar' as const, position: 'top' as const, shadow: true, background: 'surface-elevated' as const }
  ];
  
  // Interactive controls
  selectedPosition: typeof this.positions[number] = 'top';
  selectedVariant: typeof this.variantOptions[number] = 'header';
  enableShadow = true;
  enableBorder = false;
  enableBlur = false;
  
  updateConfig(): void {
    console.log('Sticky layout config updated:', {
      position: this.selectedPosition,
      variant: this.selectedVariant,
      shadow: this.enableShadow,
      border: this.enableBorder,
      blur: this.enableBlur
    });
  }
}