import { Component, signal } from '@angular/core';
import { CommonModule } from '@angular/common';
import { TransferListComponent, TransferListItem } from '../../../../../ui-essentials/src/lib/components/data-display/transfer-list/transfer-list.component';

@Component({
  selector: 'ui-transfer-list-demo',
  standalone: true,
  imports: [CommonModule, TransferListComponent],
  template: `
    <div class="demo-container">
      <h2>Transfer List Demo</h2>
      
      <!-- Basic Example -->
      <section class="demo-section">
        <h3>Basic Transfer List</h3>
        <p class="demo-description">
          Select items from the source list and transfer them to the target list using the control buttons.
        </p>
        <ui-transfer-list
          [sourceItems]="basicSourceItems()"
          [targetItems]="basicTargetItems()"
          sourceTitle="Available Items"
          targetTitle="Selected Items"
          (sourceChange)="onBasicSourceChange($event)"
          (targetChange)="onBasicTargetChange($event)"
          (itemMove)="onItemMove($event)"
        ></ui-transfer-list>
      </section>

      <!-- Size Variants -->
      <section class="demo-section">
        <h3>Size Variants</h3>
        <div class="demo-row demo-row--vertical">
          <div class="demo-item">
            <h4>Small</h4>
            <ui-transfer-list
              size="sm"
              [sourceItems]="sizeSourceItems()"
              [targetItems]="sizeTargetItems()"
              sourceTitle="Small List"
              targetTitle="Selected"
            ></ui-transfer-list>
          </div>
          
          <div class="demo-item">
            <h4>Medium (Default)</h4>
            <ui-transfer-list
              size="md"
              [sourceItems]="sizeSourceItems()"
              [targetItems]="sizeTargetItems()"
              sourceTitle="Medium List"
              targetTitle="Selected"
            ></ui-transfer-list>
          </div>
          
          <div class="demo-item">
            <h4>Large</h4>
            <ui-transfer-list
              size="lg"
              [sourceItems]="sizeSourceItems()"
              [targetItems]="sizeTargetItems()"
              sourceTitle="Large List"
              targetTitle="Selected"
            ></ui-transfer-list>
          </div>
        </div>
      </section>

      <!-- Configuration Options -->
      <section class="demo-section">
        <h3>Configuration Options</h3>
        
        <div class="demo-controls">
          <label>
            <input type="checkbox" [checked]="showSearch()" (change)="toggleSearch()">
            Show Search
          </label>
          <label>
            <input type="checkbox" [checked]="showSelectAll()" (change)="toggleSelectAll()">
            Show Select All
          </label>
          <label>
            <input type="checkbox" [checked]="showCheckboxes()" (change)="toggleCheckboxes()">
            Show Checkboxes
          </label>
          <label>
            <input type="checkbox" [checked]="showMoveAll()" (change)="toggleMoveAll()">
            Show Move All Buttons
          </label>
          <label>
            <input type="checkbox" [checked]="isDisabled()" (change)="toggleDisabled()">
            Disabled
          </label>
        </div>
        
        <ui-transfer-list
          [sourceItems]="configSourceItems()"
          [targetItems]="configTargetItems()"
          [showSearch]="showSearch()"
          [showSelectAll]="showSelectAll()"
          [showCheckboxes]="showCheckboxes()"
          [showMoveAll]="showMoveAll()"
          [disabled]="isDisabled()"
          sourceTitle="Configurable Source"
          targetTitle="Configurable Target"
          searchPlaceholder="Filter items..."
          (sourceChange)="onConfigSourceChange($event)"
          (targetChange)="onConfigTargetChange($event)"
        ></ui-transfer-list>
      </section>

      <!-- With Disabled Items -->
      <section class="demo-section">
        <h3>With Disabled Items</h3>
        <p class="demo-description">
          Some items can be disabled and cannot be selected or transferred.
        </p>
        <ui-transfer-list
          [sourceItems]="disabledSourceItems()"
          [targetItems]="disabledTargetItems()"
          sourceTitle="Mixed Items"
          targetTitle="Available Items"
          (sourceChange)="onDisabledSourceChange($event)"
          (targetChange)="onDisabledTargetChange($event)"
        ></ui-transfer-list>
      </section>

      <!-- Large Dataset -->
      <section class="demo-section">
        <h3>Large Dataset</h3>
        <p class="demo-description">
          Transfer list with a large number of items to test performance and search functionality.
        </p>
        <ui-transfer-list
          [sourceItems]="largeSourceItems()"
          [targetItems]="largeTargetItems()"
          sourceTitle="Large Dataset ({{ largeSourceItems().length }} items)"
          targetTitle="Selected Items"
          searchPlaceholder="Search in {{ largeSourceItems().length }} items..."
          (sourceChange)="onLargeSourceChange($event)"
          (targetChange)="onLargeTargetChange($event)"
        ></ui-transfer-list>
      </section>

      <!-- Custom Labels -->
      <section class="demo-section">
        <h3>Custom Labels & Accessibility</h3>
        <ui-transfer-list
          [sourceItems]="customSourceItems()"
          [targetItems]="customTargetItems()"
          sourceTitle="Available Permissions"
          targetTitle="Granted Permissions"
          searchPlaceholder="Search permissions..."
          ariaLabel="User permission management"
          (sourceChange)="onCustomSourceChange($event)"
          (targetChange)="onCustomTargetChange($event)"
        ></ui-transfer-list>
      </section>

      <!-- Event Log -->
      <section class="demo-section">
        <h3>Event Log</h3>
        <div class="demo-event-log">
          @if (eventLog().length === 0) {
            <p class="demo-no-events">No events logged yet. Interact with the transfer lists above to see events.</p>
          } @else {
            @for (event of eventLog(); track $index) {
              <div class="demo-event">
                <strong>{{ event.type }}:</strong> {{ event.message }}
                <small class="demo-event-time">{{ event.timestamp | date:'short' }}</small>
              </div>
            }
          }
          @if (eventLog().length > 0) {
            <button type="button" class="demo-clear-events" (click)="clearEventLog()">
              Clear Log
            </button>
          }
        </div>
      </section>
    </div>
  `,
  styleUrl: './transfer-list-demo.component.scss'
})
export class TransferListDemoComponent {
  // Basic example data
  basicSourceItems = signal<TransferListItem[]>([
    { id: 1, label: 'Apple' },
    { id: 2, label: 'Banana' },
    { id: 3, label: 'Cherry' },
    { id: 4, label: 'Date' },
    { id: 5, label: 'Elderberry' },
    { id: 6, label: 'Fig' },
    { id: 7, label: 'Grape' },
    { id: 8, label: 'Honeydew' }
  ]);

  basicTargetItems = signal<TransferListItem[]>([
    { id: 9, label: 'Orange' },
    { id: 10, label: 'Pear' }
  ]);

  // Size variant data
  sizeSourceItems = signal<TransferListItem[]>([
    { id: 'size1', label: 'Item 1' },
    { id: 'size2', label: 'Item 2' },
    { id: 'size3', label: 'Item 3' }
  ]);

  sizeTargetItems = signal<TransferListItem[]>([
    { id: 'size4', label: 'Item 4' }
  ]);

  // Configuration example data
  configSourceItems = signal<TransferListItem[]>([
    { id: 'config1', label: 'Configuration Option 1' },
    { id: 'config2', label: 'Configuration Option 2' },
    { id: 'config3', label: 'Configuration Option 3' },
    { id: 'config4', label: 'Configuration Option 4' },
    { id: 'config5', label: 'Configuration Option 5' }
  ]);

  configTargetItems = signal<TransferListItem[]>([]);

  // Configuration toggles
  showSearch = signal(true);
  showSelectAll = signal(true);
  showCheckboxes = signal(true);
  showMoveAll = signal(true);
  isDisabled = signal(false);

  // Disabled items example
  disabledSourceItems = signal<TransferListItem[]>([
    { id: 'dis1', label: 'Regular Item 1' },
    { id: 'dis2', label: 'Disabled Item', disabled: true },
    { id: 'dis3', label: 'Regular Item 2' },
    { id: 'dis4', label: 'Another Disabled Item', disabled: true },
    { id: 'dis5', label: 'Regular Item 3' }
  ]);

  disabledTargetItems = signal<TransferListItem[]>([]);

  // Large dataset
  largeSourceItems = signal<TransferListItem[]>(this.generateLargeDataset());
  largeTargetItems = signal<TransferListItem[]>([]);

  // Custom labels example
  customSourceItems = signal<TransferListItem[]>([
    { id: 'perm1', label: 'Read Users', data: { permission: 'users:read' } },
    { id: 'perm2', label: 'Write Users', data: { permission: 'users:write' } },
    { id: 'perm3', label: 'Delete Users', data: { permission: 'users:delete' } },
    { id: 'perm4', label: 'Read Posts', data: { permission: 'posts:read' } },
    { id: 'perm5', label: 'Write Posts', data: { permission: 'posts:write' } },
    { id: 'perm6', label: 'Delete Posts', data: { permission: 'posts:delete' } },
    { id: 'perm7', label: 'Manage Settings', data: { permission: 'settings:manage' } },
    { id: 'perm8', label: 'View Analytics', data: { permission: 'analytics:view' } }
  ]);

  customTargetItems = signal<TransferListItem[]>([]);

  // Event logging
  eventLog = signal<Array<{ type: string; message: string; timestamp: Date }>>([]);

  // Generate large dataset for performance testing
  private generateLargeDataset(): TransferListItem[] {
    const items: TransferListItem[] = [];
    const categories = ['Documents', 'Images', 'Videos', 'Audio', 'Archives', 'Code'];
    const types = ['Personal', 'Work', 'Project', 'Backup', 'Temp'];
    
    for (let i = 1; i <= 100; i++) {
      const category = categories[i % categories.length];
      const type = types[i % types.length];
      items.push({
        id: `large${i}`,
        label: `${category} - ${type} File ${i.toString().padStart(3, '0')}`,
        data: { category, type, index: i }
      });
    }
    return items;
  }

  // Event handlers for basic example
  onBasicSourceChange(items: TransferListItem[]) {
    this.basicSourceItems.set(items);
    this.logEvent('Source Change', `Basic source now has ${items.length} items`);
  }

  onBasicTargetChange(items: TransferListItem[]) {
    this.basicTargetItems.set(items);
    this.logEvent('Target Change', `Basic target now has ${items.length} items`);
  }

  // Event handlers for configuration example
  onConfigSourceChange(items: TransferListItem[]) {
    this.configSourceItems.set(items);
    this.logEvent('Config Source Change', `Config source now has ${items.length} items`);
  }

  onConfigTargetChange(items: TransferListItem[]) {
    this.configTargetItems.set(items);
    this.logEvent('Config Target Change', `Config target now has ${items.length} items`);
  }

  // Event handlers for disabled items example
  onDisabledSourceChange(items: TransferListItem[]) {
    this.disabledSourceItems.set(items);
    this.logEvent('Disabled Source Change', `Disabled source now has ${items.length} items`);
  }

  onDisabledTargetChange(items: TransferListItem[]) {
    this.disabledTargetItems.set(items);
    this.logEvent('Disabled Target Change', `Disabled target now has ${items.length} items`);
  }

  // Event handlers for large dataset example
  onLargeSourceChange(items: TransferListItem[]) {
    this.largeSourceItems.set(items);
    this.logEvent('Large Source Change', `Large source now has ${items.length} items`);
  }

  onLargeTargetChange(items: TransferListItem[]) {
    this.largeTargetItems.set(items);
    this.logEvent('Large Target Change', `Large target now has ${items.length} items`);
  }

  // Event handlers for custom example
  onCustomSourceChange(items: TransferListItem[]) {
    this.customSourceItems.set(items);
    this.logEvent('Custom Source Change', `Custom source now has ${items.length} items`);
  }

  onCustomTargetChange(items: TransferListItem[]) {
    this.customTargetItems.set(items);
    this.logEvent('Custom Target Change', `Custom target now has ${items.length} items`);
  }

  // Item move event handler
  onItemMove(event: { item: TransferListItem; from: 'source' | 'target'; to: 'source' | 'target' }) {
    this.logEvent('Item Move', `Moved "${event.item.label}" from ${event.from} to ${event.to}`);
  }

  // Configuration toggle methods
  toggleSearch() {
    this.showSearch.update(value => !value);
    this.logEvent('Config Change', `Search ${this.showSearch() ? 'enabled' : 'disabled'}`);
  }

  toggleSelectAll() {
    this.showSelectAll.update(value => !value);
    this.logEvent('Config Change', `Select All ${this.showSelectAll() ? 'enabled' : 'disabled'}`);
  }

  toggleCheckboxes() {
    this.showCheckboxes.update(value => !value);
    this.logEvent('Config Change', `Checkboxes ${this.showCheckboxes() ? 'enabled' : 'disabled'}`);
  }

  toggleMoveAll() {
    this.showMoveAll.update(value => !value);
    this.logEvent('Config Change', `Move All buttons ${this.showMoveAll() ? 'enabled' : 'disabled'}`);
  }

  toggleDisabled() {
    this.isDisabled.update(value => !value);
    this.logEvent('Config Change', `Component ${this.isDisabled() ? 'disabled' : 'enabled'}`);
  }

  // Event logging
  private logEvent(type: string, message: string) {
    this.eventLog.update(log => [
      { type, message, timestamp: new Date() },
      ...log.slice(0, 9) // Keep only the last 10 events
    ]);
  }

  clearEventLog() {
    this.eventLog.set([]);
  }
}