import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { SidebarLayoutComponent } from '../../../../../ui-essentials/src/lib/components/layout/sidebar-layout/sidebar-layout.component';

@Component({
  selector: 'ui-sidebar-layout-demo',
  standalone: true,
  imports: [CommonModule, FormsModule, SidebarLayoutComponent],
  template: `
    <div class="demo-container">
      <h2>Sidebar Layout Demo</h2>
      
      <!-- Position Variants -->
      <section class="demo-section">
        <h3>Position Variants</h3>
        <div class="demo-row">
          <div class="demo-card">
            <h4>Left Sidebar (Default)</h4>
            <div class="sidebar-demo-container">
              <ui-sidebar-layout position="left" sidebarWidth="sm">
                <div slot="sidebar">
                  <h5>Left Navigation</h5>
                  <ul>
                    <li>Dashboard</li>
                    <li>Analytics</li>
                    <li>Settings</li>
                  </ul>
                </div>
                <div class="demo-content">
                  <h4>Main Content Area</h4>
                  <p>This is the main content area with left sidebar navigation.</p>
                </div>
              </ui-sidebar-layout>
            </div>
          </div>
          
          <div class="demo-card">
            <h4>Right Sidebar</h4>
            <div class="sidebar-demo-container">
              <ui-sidebar-layout position="right" sidebarWidth="sm">
                <div slot="sidebar">
                  <h5>Right Panel</h5>
                  <ul>
                    <li>Quick Actions</li>
                    <li>Recent Items</li>
                    <li>Help</li>
                  </ul>
                </div>
                <div class="demo-content">
                  <h4>Main Content Area</h4>
                  <p>This is the main content area with right sidebar panel.</p>
                </div>
              </ui-sidebar-layout>
            </div>
          </div>
        </div>
      </section>
      
      <!-- Width Variants -->
      <section class="demo-section">
        <h3>Sidebar Widths</h3>
        <div class="demo-row">
          @for (width of widths; track width) {
            <div class="demo-card">
              <h4>{{ width.toUpperCase() }} Width</h4>
              <div class="sidebar-demo-container">
                <ui-sidebar-layout [sidebarWidth]="width">
                  <div slot="sidebar">
                    <h5>{{ width.toUpperCase() }} Sidebar</h5>
                    <p>Width: {{ width }}</p>
                  </div>
                  <div class="demo-content">
                    <h4>Content</h4>
                    <p>Main content with {{ width }} sidebar.</p>
                  </div>
                </ui-sidebar-layout>
              </div>
            </div>
          }
        </div>
      </section>
      
      <!-- Visual Variants -->
      <section class="demo-section">
        <h3>Visual Variants</h3>
        <div class="demo-row">
          @for (variant of variants; track variant) {
            <div class="demo-card">
              <h4>{{ variant | titlecase }}</h4>
              <div class="sidebar-demo-container">
                <ui-sidebar-layout [variant]="variant" sidebarWidth="sm">
                  <div slot="sidebar">
                    <h5>{{ variant | titlecase }} Style</h5>
                    <ul>
                      <li>Item One</li>
                      <li>Item Two</li>
                      <li>Item Three</li>
                    </ul>
                  </div>
                  <div class="demo-content">
                    <h4>Content</h4>
                    <p>Content area with {{ variant }} sidebar variant.</p>
                  </div>
                </ui-sidebar-layout>
              </div>
            </div>
          }
        </div>
      </section>
      
      <!-- Collapse States -->
      <section class="demo-section">
        <h3>Collapse States</h3>
        <div class="demo-row">
          <div class="demo-card">
            <h4>Collapsed Sidebar</h4>
            <div class="sidebar-demo-container">
              <ui-sidebar-layout [collapsed]="true" collapseMode="collapsed">
                <div slot="sidebar">
                  <h5>Nav</h5>
                  <ul>
                    <li>🏠</li>
                    <li>📊</li>
                    <li>⚙️</li>
                  </ul>
                </div>
                <div class="demo-content">
                  <h4>Collapsed Mode</h4>
                  <p>Sidebar is collapsed showing minimal width.</p>
                </div>
              </ui-sidebar-layout>
            </div>
          </div>
          
          <div class="demo-card">
            <h4>Hidden Sidebar</h4>
            <div class="sidebar-demo-container">
              <ui-sidebar-layout [collapsed]="true" collapseMode="hidden">
                <div slot="sidebar">
                  <h5>Hidden Sidebar</h5>
                  <p>This sidebar is hidden when collapsed.</p>
                </div>
                <div class="demo-content">
                  <h4>Hidden Mode</h4>
                  <p>Sidebar is completely hidden, content takes full width.</p>
                </div>
              </ui-sidebar-layout>
            </div>
          </div>
        </div>
      </section>
      
      <!-- Interactive Example -->
      <section class="demo-section">
        <h3>Interactive Controls</h3>
        <div class="demo-controls">
          <label>
            Position:
            <select [(ngModel)]="interactivePosition">
              <option value="left">Left</option>
              <option value="right">Right</option>
            </select>
          </label>
          
          <label>
            Width:
            <select [(ngModel)]="interactiveWidth">
              <option value="sm">Small</option>
              <option value="md">Medium</option>
              <option value="lg">Large</option>
              <option value="xl">Extra Large</option>
            </select>
          </label>
          
          <label>
            Variant:
            <select [(ngModel)]="interactiveVariant">
              <option value="default">Default</option>
              <option value="bordered">Bordered</option>
              <option value="elevated">Elevated</option>
            </select>
          </label>
          
          <label>
            <input type="checkbox" [(ngModel)]="interactiveCollapsed">
            Collapsed
          </label>
          
          <label>
            Collapse Mode:
            <select [(ngModel)]="interactiveCollapseMode">
              <option value="collapsed">Collapsed</option>
              <option value="hidden">Hidden</option>
              <option value="overlay">Overlay</option>
            </select>
          </label>
        </div>
        
        <div class="sidebar-demo-container sidebar-demo-container--interactive">
          <ui-sidebar-layout 
            [position]="interactivePosition"
            [sidebarWidth]="interactiveWidth"
            [variant]="interactiveVariant"
            [collapsed]="interactiveCollapsed"
            [collapseMode]="interactiveCollapseMode">
            
            <div slot="sidebar">
              <h5>Interactive Sidebar</h5>
              <nav>
                <ul>
                  <li>📱 Dashboard</li>
                  <li>📊 Analytics</li>
                  <li>👥 Users</li>
                  <li>⚙️ Settings</li>
                  <li>❓ Help</li>
                </ul>
              </nav>
            </div>
            
            <div class="demo-content">
              <h4>Interactive Demo</h4>
              <p>Use the controls above to test different sidebar configurations:</p>
              <ul>
                <li><strong>Position:</strong> {{ interactivePosition }}</li>
                <li><strong>Width:</strong> {{ interactiveWidth }}</li>
                <li><strong>Variant:</strong> {{ interactiveVariant }}</li>
                <li><strong>Collapsed:</strong> {{ interactiveCollapsed }}</li>
                <li><strong>Collapse Mode:</strong> {{ interactiveCollapseMode }}</li>
              </ul>
              
              <button 
                (click)="toggleCollapse()" 
                class="demo-button">
                {{ interactiveCollapsed ? 'Expand' : 'Collapse' }} Sidebar
              </button>
            </div>
          </ui-sidebar-layout>
        </div>
      </section>
    </div>
  `,
  styleUrl: './sidebar-layout-demo.component.scss'
})
export class SidebarLayoutDemoComponent {
  widths = ['sm', 'md', 'lg', 'xl'] as const;
  variants = ['default', 'bordered', 'elevated'] as const;
  
  // Interactive demo properties
  interactivePosition: 'left' | 'right' = 'left';
  interactiveWidth: 'sm' | 'md' | 'lg' | 'xl' = 'md';
  interactiveVariant: 'default' | 'bordered' | 'elevated' = 'default';
  interactiveCollapsed = false;
  interactiveCollapseMode: 'hidden' | 'collapsed' | 'overlay' = 'collapsed';
  
  toggleCollapse(): void {
    this.interactiveCollapsed = !this.interactiveCollapsed;
  }
}