import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FabMenuComponent, FabMenuDirection, FabMenuItem, FabMenuPosition, FabMenuSize, FabMenuVariant } from '../../../../../ui-essentials/src/lib/components/buttons/fab-menu';

@Component({
  selector: 'ui-fab-menu-demo',
  standalone: true,
  imports: [CommonModule, FabMenuComponent],
  template: `
    <div class="demo-container">
      <h2>Floating Action Button Menu Demo</h2>
      <p>An interactive floating action button menu that expands to reveal multiple action items.</p>
      
      <!-- Size Variants -->
      <section class="demo-section">
        <h3>Sizes</h3>
        <div class="demo-row">
          @for (size of sizes; track size) {
            <div class="demo-example">
              <h4>{{ size | titlecase }}</h4>
              <ui-fab-menu 
                [size]="size"
                [menuItems]="basicMenuItems"
                [triggerIcon]="plusIcon"
                [closeIcon]="closeIcon"
                triggerLabel="Open {{ size }} menu"
                (itemClicked)="handleItemClick($event)">
              </ui-fab-menu>
            </div>
          }
        </div>
      </section>
      
      <!-- Color Variants -->
      <section class="demo-section">
        <h3>Color Variants</h3>
        <div class="demo-row">
          @for (variant of variants; track variant) {
            <div class="demo-example">
              <h4>{{ variant | titlecase }}</h4>
              <ui-fab-menu 
                [variant]="variant"
                [menuItems]="getVariantMenuItems(variant)"
                [triggerIcon]="plusIcon"
                [closeIcon]="closeIcon"
                [triggerLabel]="variant + ' menu'"
                (itemClicked)="handleItemClick($event)">
              </ui-fab-menu>
            </div>
          }
        </div>
      </section>
      
      <!-- Direction Variants -->
      <section class="demo-section">
        <h3>Direction Variants</h3>
        <div class="demo-row demo-row--spaced">
          @for (direction of directions; track direction) {
            <div class="demo-example">
              <h4>{{ direction | titlecase }}</h4>
              <ui-fab-menu 
                [direction]="direction"
                [menuItems]="basicMenuItems"
                [triggerIcon]="plusIcon"
                [closeIcon]="closeIcon"
                [triggerLabel]="direction + ' direction menu'"
                (itemClicked)="handleItemClick($event)">
              </ui-fab-menu>
            </div>
          }
        </div>
      </section>
      
      <!-- Position Variants (Fixed Positioning) -->
      <section class="demo-section">
        <h3>Fixed Positions</h3>
        <p>These examples show fixed positioning variants (click to activate):</p>
        <div class="demo-row">
          @for (position of positions; track position) {
            <button 
              class="demo-button"
              (click)="togglePositionDemo(position)">
              Show {{ position | titlecase }} FAB Menu
            </button>
          }
        </div>
        
        @if (activePositionDemo) {
          <ui-fab-menu 
            [position]="activePositionDemo"
            [menuItems]="positionMenuItems"
            [triggerIcon]="menuIcon"
            [closeIcon]="closeIcon"
            [triggerLabel]="activePositionDemo + ' positioned menu'"
            (opened)="onMenuOpened()"
            (closed)="onMenuClosed()"
            (itemClicked)="handlePositionItemClick($event)">
          </ui-fab-menu>
        }
      </section>
      
      <!-- States -->
      <section class="demo-section">
        <h3>States</h3>
        <div class="demo-row">
          <div class="demo-example">
            <h4>Disabled</h4>
            <ui-fab-menu 
              [disabled]="true"
              [menuItems]="basicMenuItems"
              [triggerIcon]="plusIcon"
              triggerLabel="Disabled menu">
            </ui-fab-menu>
          </div>
          
          <div class="demo-example">
            <h4>No Backdrop</h4>
            <ui-fab-menu 
              [backdrop]="false"
              [menuItems]="basicMenuItems"
              [triggerIcon]="plusIcon"
              [closeIcon]="closeIcon"
              triggerLabel="Menu without backdrop"
              (itemClicked)="handleItemClick($event)">
            </ui-fab-menu>
          </div>
          
          <div class="demo-example">
            <h4>Stay Open</h4>
            <ui-fab-menu 
              [closeOnItemClick]="false"
              [menuItems]="basicMenuItems"
              [triggerIcon]="plusIcon"
              [closeIcon]="closeIcon"
              triggerLabel="Menu stays open"
              (itemClicked)="handleItemClick($event)">
            </ui-fab-menu>
          </div>
        </div>
      </section>
      
      <!-- Advanced Examples -->
      <section class="demo-section">
        <h3>Advanced Examples</h3>
        
        <div class="demo-example">
          <h4>Mixed Item Variants</h4>
          <ui-fab-menu 
            [menuItems]="mixedMenuItems"
            [triggerIcon]="settingsIcon"
            [closeIcon]="closeIcon"
            triggerLabel="Settings menu"
            (itemClicked)="handleItemClick($event)">
          </ui-fab-menu>
        </div>
        
        <div class="demo-example">
          <h4>Large Menu with Icons</h4>
          <ui-fab-menu 
            size="lg"
            [menuItems]="iconMenuItems"
            [triggerIcon]="appsIcon"
            [closeIcon]="closeIcon"
            triggerLabel="App launcher"
            (itemClicked)="handleItemClick($event)">
          </ui-fab-menu>
        </div>
      </section>
      
      <!-- Interactive Feedback -->
      <section class="demo-section">
        <h3>Event Log</h3>
        <div class="demo-log">
          @if (eventLog.length === 0) {
            <p class="demo-log__empty">No events yet. Interact with the FAB menus above.</p>
          } @else {
            @for (event of eventLog.slice(-10); track $index) {
              <div class="demo-log__entry">
                <span class="demo-log__time">{{ event.timestamp | date:'HH:mm:ss' }}</span>
                <span class="demo-log__message">{{ event.message }}</span>
              </div>
            }
          }
        </div>
        <button class="demo-button demo-button--secondary" (click)="clearLog()">Clear Log</button>
      </section>
    </div>
  `,
  styleUrl: './fab-menu-demo.component.scss'
})
export class FabMenuDemoComponent {
  sizes: FabMenuSize[] = ['sm', 'md', 'lg'];
  variants: FabMenuVariant[] = ['primary', 'secondary', 'success', 'danger'];
  directions: FabMenuDirection[] = ['up', 'down', 'left', 'right'];
  positions: FabMenuPosition[] = ['bottom-right', 'bottom-left', 'top-right', 'top-left'];
  
  activePositionDemo: FabMenuPosition | null = null;
  eventLog: Array<{timestamp: Date, message: string}> = [];
  
  // Icons (using simple text for demo - could be replaced with FontAwesome or other icon library)
  plusIcon = '<span>+</span>';
  closeIcon = '<span>×</span>';
  menuIcon = '<span>☰</span>';
  settingsIcon = '<span>⚙</span>';
  appsIcon = '<span>⊞</span>';
  
  basicMenuItems: FabMenuItem[] = [
    { id: 'action1', label: 'Action 1', icon: '<span>📝</span>' },
    { id: 'action2', label: 'Action 2', icon: '<span>📁</span>' },
    { id: 'action3', label: 'Action 3', icon: '<span>📊</span>' }
  ];
  
  positionMenuItems: FabMenuItem[] = [
    { id: 'close', label: 'Close Menu', icon: '<span>×</span>' },
    { id: 'home', label: 'Go Home', icon: '<span>🏠</span>' },
    { id: 'profile', label: 'Profile', icon: '<span>👤</span>' },
    { id: 'settings', label: 'Settings', icon: '<span>⚙</span>' }
  ];
  
  mixedMenuItems: FabMenuItem[] = [
    { id: 'save', label: 'Save', variant: 'success', icon: '<span>💾</span>' },
    { id: 'edit', label: 'Edit', variant: 'primary', icon: '<span>✏️</span>' },
    { id: 'delete', label: 'Delete', variant: 'danger', icon: '<span>🗑️</span>' },
    { id: 'disabled', label: 'Disabled', disabled: true, icon: '<span>🚫</span>' }
  ];
  
  iconMenuItems: FabMenuItem[] = [
    { id: 'email', label: 'Email', icon: '<span>📧</span>' },
    { id: 'calendar', label: 'Calendar', icon: '<span>📅</span>' },
    { id: 'documents', label: 'Documents', icon: '<span>📄</span>' },
    { id: 'photos', label: 'Photos', icon: '<span>📸</span>' },
    { id: 'music', label: 'Music', icon: '<span>🎵</span>' },
    { id: 'videos', label: 'Videos', icon: '<span>🎬</span>' }
  ];
  
  getVariantMenuItems(variant: FabMenuVariant): FabMenuItem[] {
    return [
      { id: `${variant}1`, label: `${variant} Item 1`, variant },
      { id: `${variant}2`, label: `${variant} Item 2`, variant },
      { id: `${variant}3`, label: `${variant} Item 3`, variant }
    ];
  }
  
  handleItemClick(event: {item: FabMenuItem, event: Event}): void {
    this.logEvent(`Item clicked: ${event.item.label} (${event.item.id})`);
  }
  
  togglePositionDemo(position: FabMenuPosition): void {
    if (this.activePositionDemo === position) {
      this.activePositionDemo = null;
      this.logEvent(`Closed ${position} positioned menu`);
    } else {
      this.activePositionDemo = position;
      this.logEvent(`Opened ${position} positioned menu`);
    }
  }
  
  handlePositionItemClick(event: {item: FabMenuItem, event: Event}): void {
    if (event.item.id === 'close') {
      this.activePositionDemo = null;
      this.logEvent('Closed positioned menu via menu item');
    } else {
      this.logEvent(`Position menu item clicked: ${event.item.label}`);
    }
  }
  
  onMenuOpened(): void {
    this.logEvent('Menu opened');
  }
  
  onMenuClosed(): void {
    this.logEvent('Menu closed');
  }
  
  logEvent(message: string): void {
    this.eventLog.push({
      timestamp: new Date(),
      message
    });
  }
  
  clearLog(): void {
    this.eventLog = [];
    this.logEvent('Event log cleared');
  }
}