import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { SupportingPaneLayoutComponent } from 'ui-essentials';
import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
import { faHome, faCog, faUser, faChartBar, faFileText, faBell, faBookmark, faTag, faCalendar, faComment } from '@fortawesome/free-solid-svg-icons';

@Component({
  selector: 'ui-supporting-pane-layout-demo',
  standalone: true,
  imports: [CommonModule, FormsModule, SupportingPaneLayoutComponent, FontAwesomeModule],
  template: `
    <div class="demo-container">
      <h2>Supporting Pane Layout Demo</h2>
      <p>A layout component with main content and a collapsible supporting pane for additional information, tools, or navigation.</p>
      
      <!-- Position Variants -->
      <section class="demo-section">
        <h3>Position Variants</h3>
        <div class="demo-grid">
          <!-- Right Position (Default) -->
          <div class="demo-card">
            <h4>Right Position (Default)</h4>
            <div class="demo-layout-preview">
              <ui-supporting-pane-layout 
                position="right"
                [collapsed]="rightPaneCollapsed"
                (paneToggled)="rightPaneCollapsed = $event">
                
                <!-- Main Content -->
                <div class="demo-main-content">
                  <h3><fa-icon [icon]="faHome"></fa-icon> Main Content Area</h3>
                  <p>This is the primary content area where your main application content would be displayed.</p>
                  <div class="demo-content-blocks">
                    <div class="demo-content-block">
                      <h4><fa-icon [icon]="faChartBar"></fa-icon> Analytics Dashboard</h4>
                      <p>Key metrics and performance indicators would be shown here.</p>
                    </div>
                    <div class="demo-content-block">
                      <h4><fa-icon [icon]="faFileText"></fa-icon> Recent Documents</h4>
                      <p>A list of recently accessed or modified documents.</p>
                    </div>
                  </div>
                </div>
                
                <!-- Supporting Pane -->
                <div slot="supporting-pane">
                  <h4><fa-icon [icon]="faCog"></fa-icon> Quick Settings</h4>
                  <div class="demo-pane-content">
                    <div class="demo-setting-item">
                      <fa-icon [icon]="faBell"></fa-icon>
                      <span>Notifications</span>
                    </div>
                    <div class="demo-setting-item">
                      <fa-icon [icon]="faUser"></fa-icon>
                      <span>Profile Settings</span>
                    </div>
                    <div class="demo-setting-item">
                      <fa-icon [icon]="faBookmark"></fa-icon>
                      <span>Saved Items</span>
                    </div>
                  </div>
                </div>
                
                <!-- Pane Header -->
                <div slot="pane-header">
                  <span><fa-icon [icon]="faCog"></fa-icon> Tools</span>
                </div>
              </ui-supporting-pane-layout>
            </div>
          </div>
          
          <!-- Left Position -->
          <div class="demo-card">
            <h4>Left Position</h4>
            <div class="demo-layout-preview">
              <ui-supporting-pane-layout 
                position="left"
                [collapsed]="leftPaneCollapsed"
                (paneToggled)="leftPaneCollapsed = $event">
                
                <!-- Main Content -->
                <div class="demo-main-content">
                  <h3><fa-icon [icon]="faHome"></fa-icon> Main Content Area</h3>
                  <p>Content area with supporting pane on the left side.</p>
                  <div class="demo-content-blocks">
                    <div class="demo-content-block">
                      <h4><fa-icon [icon]="faComment"></fa-icon> Messages</h4>
                      <p>Recent messages and communications.</p>
                    </div>
                  </div>
                </div>
                
                <!-- Supporting Pane -->
                <div slot="supporting-pane">
                  <h4><fa-icon [icon]="faTag"></fa-icon> Tags & Categories</h4>
                  <div class="demo-pane-content">
                    <div class="demo-tag-item">Design</div>
                    <div class="demo-tag-item">Development</div>
                    <div class="demo-tag-item">Marketing</div>
                    <div class="demo-tag-item">Research</div>
                  </div>
                </div>
                
                <div slot="pane-header">
                  <span><fa-icon [icon]="faTag"></fa-icon> Categories</span>
                </div>
              </ui-supporting-pane-layout>
            </div>
          </div>
        </div>
      </section>
      
      <!-- Size Variants -->
      <section class="demo-section">
        <h3>Size Variants</h3>
        <div class="demo-row">
          <button class="demo-btn" [class.active]="selectedSize === size" 
                  *ngFor="let size of sizes" (click)="selectedSize = size">
            {{ size.toUpperCase() }}
          </button>
        </div>
        
        <div class="demo-layout-preview">
          <ui-supporting-pane-layout 
            [paneSize]="selectedSize"
            [collapsed]="sizePaneCollapsed"
            (paneToggled)="sizePaneCollapsed = $event">
            
            <div class="demo-main-content">
              <h3>Size: {{ selectedSize.toUpperCase() }}</h3>
              <p>The supporting pane width changes based on the selected size variant.</p>
            </div>
            
            <div slot="supporting-pane">
              <h4>Supporting Information</h4>
              <p>Pane size: {{ selectedSize }}</p>
              <div class="demo-pane-content">
                <div class="demo-info-item">Current size: {{ selectedSize.toUpperCase() }}</div>
                <div class="demo-info-item">Responsive: Yes</div>
                <div class="demo-info-item">Collapsible: Yes</div>
              </div>
            </div>
            
            <div slot="pane-header">
              <span>Size: {{ selectedSize.toUpperCase() }}</span>
            </div>
          </ui-supporting-pane-layout>
        </div>
      </section>
      
      <!-- Visual Variants -->
      <section class="demo-section">
        <h3>Visual Variants</h3>
        <div class="demo-row">
          <button class="demo-btn" [class.active]="selectedVariant === variant" 
                  *ngFor="let variant of variants" (click)="selectedVariant = variant">
            {{ variant | titlecase }}
          </button>
        </div>
        
        <div class="demo-layout-preview">
          <ui-supporting-pane-layout 
            [variant]="selectedVariant"
            [collapsed]="variantPaneCollapsed"
            (paneToggled)="variantPaneCollapsed = $event">
            
            <div class="demo-main-content">
              <h3>Variant: {{ selectedVariant | titlecase }}</h3>
              <p>Different visual styles for the supporting pane.</p>
              <div class="demo-content-blocks">
                <div class="demo-content-block">
                  <h4>Visual Style</h4>
                  <p>Current variant: <strong>{{ selectedVariant }}</strong></p>
                </div>
              </div>
            </div>
            
            <div slot="supporting-pane">
              <h4>Variant Demo</h4>
              <div class="demo-pane-content">
                <div class="demo-variant-info">
                  <strong>{{ selectedVariant | titlecase }}</strong> variant applied
                </div>
                <p>This demonstrates the {{ selectedVariant }} visual styling.</p>
              </div>
            </div>
            
            <div slot="pane-header">
              <span>{{ selectedVariant | titlecase }} Style</span>
            </div>
          </ui-supporting-pane-layout>
        </div>
      </section>
      
      <!-- Features Demo -->
      <section class="demo-section">
        <h3>Features & Options</h3>
        
        <div class="demo-controls">
          <label class="demo-checkbox">
            <input type="checkbox" [(ngModel)]="stickyPane">
            Sticky Pane
          </label>
          <label class="demo-checkbox">
            <input type="checkbox" [(ngModel)]="alwaysVisible">
            Always Visible (No responsive collapse)
          </label>
          <label class="demo-checkbox">
            <input type="checkbox" [(ngModel)]="showFooter">
            Show Pane Footer
          </label>
        </div>
        
        <div class="demo-layout-preview">
          <ui-supporting-pane-layout 
            [stickyPane]="stickyPane"
            [alwaysVisible]="alwaysVisible"
            [showPaneFooter]="showFooter"
            [collapsed]="featuresPaneCollapsed"
            (paneToggled)="featuresPaneCollapsed = $event"
            (paneCollapsed)="onPaneCollapsed()"
            (paneExpanded)="onPaneExpanded()">
            
            <div class="demo-main-content">
              <h3><fa-icon [icon]="faCalendar"></fa-icon> Features Demo</h3>
              <p>This demo shows various configuration options:</p>
              <ul>
                <li><strong>Sticky Pane:</strong> {{ stickyPane ? 'Enabled' : 'Disabled' }}</li>
                <li><strong>Always Visible:</strong> {{ alwaysVisible ? 'Enabled' : 'Disabled' }}</li>
                <li><strong>Show Footer:</strong> {{ showFooter ? 'Enabled' : 'Disabled' }}</li>
              </ul>
              
              <div class="demo-content-blocks">
                <div class="demo-content-block" *ngFor="let i of [1,2,3,4,5,6,7,8]">
                  <h4>Content Block {{ i }}</h4>
                  <p>This is example content to demonstrate scrolling behavior when sticky pane is enabled.</p>
                </div>
              </div>
            </div>
            
            <div slot="supporting-pane">
              <h4><fa-icon [icon]="faCog"></fa-icon> Configuration</h4>
              <div class="demo-pane-content">
                <div class="demo-config-item">
                  <strong>Sticky:</strong> {{ stickyPane ? 'Yes' : 'No' }}
                </div>
                <div class="demo-config-item">
                  <strong>Always Visible:</strong> {{ alwaysVisible ? 'Yes' : 'No' }}
                </div>
                <div class="demo-config-item">
                  <strong>Footer:</strong> {{ showFooter ? 'Shown' : 'Hidden' }}
                </div>
                <div class="demo-config-item">
                  <strong>Events:</strong> {{ eventCount }} triggered
                </div>
              </div>
            </div>
            
            <div slot="pane-header">
              <span><fa-icon [icon]="faCog"></fa-icon> Options</span>
            </div>
            
            <div slot="pane-footer" *ngIf="showFooter">
              <small>Last event: {{ lastEvent }}</small>
            </div>
          </ui-supporting-pane-layout>
        </div>
      </section>
    </div>
  `,
  styleUrl: './supporting-pane-layout-demo.component.scss'
})
export class SupportingPaneLayoutDemoComponent {
  // FontAwesome icons
  faHome = faHome;
  faCog = faCog;
  faUser = faUser;
  faChartBar = faChartBar;
  faFileText = faFileText;
  faBell = faBell;
  faBookmark = faBookmark;
  faTag = faTag;
  faCalendar = faCalendar;
  faComment = faComment;
  
  // Demo state
  sizes = ['sm', 'md', 'lg', 'xl'] as const;
  variants = ['default', 'bordered', 'elevated', 'subtle'] as const;
  
  selectedSize: 'sm' | 'md' | 'lg' | 'xl' = 'md';
  selectedVariant: 'default' | 'bordered' | 'elevated' | 'subtle' = 'default';
  
  // Pane collapsed states
  rightPaneCollapsed = false;
  leftPaneCollapsed = false;
  sizePaneCollapsed = false;
  variantPaneCollapsed = false;
  featuresPaneCollapsed = false;
  
  // Feature options
  stickyPane = false;
  alwaysVisible = false;
  showFooter = false;
  
  // Event tracking
  eventCount = 0;
  lastEvent = 'None';
  
  onPaneCollapsed(): void {
    this.eventCount++;
    this.lastEvent = 'Pane Collapsed';
    console.log('Supporting pane collapsed');
  }
  
  onPaneExpanded(): void {
    this.eventCount++;
    this.lastEvent = 'Pane Expanded';
    console.log('Supporting pane expanded');
  }
}