import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { DropdownComponent, DropdownOption } from './dropdown.component';

@Component({
  selector: 'app-dropdown-demo',
  standalone: true,
  imports: [CommonModule, FormsModule, DropdownComponent],
  template: `
    <div class="demo-container">
      <h1>下拉列表组件演示</h1>
      
      <div class="demo-section">
        <h2>基础下拉列表</h2>
        <app-dropdown
          [options]="basicOptions"
          placeholder="请选择一个选项"
          label="基础选择"
          [(ngModel)]="selectedBasic"
          (selectionChange)="onBasicChange($event)">
        </app-dropdown>
        <p>选中值: {{ selectedBasic || '无' }}</p>
      </div>

      <div class="demo-section">
        <h2>多选下拉列表</h2>
        <app-dropdown
          [options]="basicOptions"
          [multiple]="true"
          placeholder="请选择多个选项"
          label="多选"
          [(ngModel)]="selectedMultiple"
          (selectionChange)="onMultipleChange($event)">
        </app-dropdown>
        <p>选中值: {{ selectedMultiple.join(', ') || '无' }}</p>
      </div>

      <div class="demo-section">
        <h2>可搜索下拉列表</h2>
        <app-dropdown
          [options]="searchableOptions"
          [searchable]="true"
          placeholder="搜索并选择"
          label="可搜索"
          helpText="输入关键词快速查找选项，支持键盘导航"
          [(ngModel)]="selectedSearchable"
          (selectionChange)="onSearchableChange($event)">
        </app-dropdown>
        <p>选中值: {{ selectedSearchable || '无' }}</p>
      </div>

      <div class="demo-section">
        <h2>带图标的下拉列表</h2>
        <app-dropdown
          [options]="iconOptions"
          placeholder="选择带图标的选项"
          label="图标选择"
          [(ngModel)]="selectedIcon"
          (selectionChange)="onIconChange($event)">
        </app-dropdown>
        <p>选中值: {{ selectedIcon || '无' }}</p>
      </div>

      <div class="demo-section">
        <h2>分组下拉列表</h2>
        <app-dropdown
          [options]="groupedOptions"
          [searchable]="true"
          placeholder="选择分组选项"
          label="分组选择"
          [(ngModel)]="selectedGrouped"
          (selectionChange)="onGroupedChange($event)">
        </app-dropdown>
        <p>选中值: {{ selectedGrouped || '无' }}</p>
      </div>

      <div class="demo-section">
        <h2>禁用状态</h2>
        <app-dropdown
          [options]="basicOptions"
          [disabled]="true"
          placeholder="禁用状态"
          label="禁用选择"
          [(ngModel)]="selectedDisabled">
        </app-dropdown>
      </div>

      <div class="demo-section">
        <h2>无障碍功能演示</h2>
        <app-dropdown
          label="无障碍功能演示"
          [options]="accessibilityOptions"
          [searchable]="true"
          placeholder="支持键盘导航和屏幕阅读器"
          helpText="使用Tab键聚焦，空格或回车键打开，方向键导航，Escape键关闭"
          [(ngModel)]="selectedAccessibility"
          (selectionChange)="onSelectionChange('accessibility', $event)">
        </app-dropdown>
      </div>

      <div class="demo-section">
        <h2>错误状态</h2>
        <app-dropdown
          [options]="basicOptions"
          placeholder="错误状态"
          label="错误选择"
          [required]="true"
          errorMessage="这是一个错误信息"
          [(ngModel)]="selectedError">
        </app-dropdown>
      </div>

      <div class="demo-section">
        <h2>不同尺寸</h2>
        <div class="size-demo">
          <app-dropdown
            [options]="basicOptions"
            size="small"
            placeholder="小尺寸"
            label="小"
            [(ngModel)]="selectedSmall">
          </app-dropdown>
          
          <app-dropdown
            [options]="basicOptions"
            size="medium"
            placeholder="中等尺寸"
            label="中"
            [(ngModel)]="selectedMedium">
          </app-dropdown>
          
          <app-dropdown
            [options]="basicOptions"
            size="large"
            placeholder="大尺寸"
            label="大"
            [(ngModel)]="selectedLarge">
          </app-dropdown>
        </div>
      </div>
    </div>
  `,
  styles: [`
    .demo-container {
      max-width: 800px;
      margin: 0 auto;
      padding: 20px;
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    }

    h1 {
      color: #1D1D1F;
      margin-bottom: 30px;
      text-align: center;
    }

    h2 {
      color: #1D1D1F;
      margin-bottom: 15px;
      font-size: 18px;
    }

    .demo-section {
      margin-bottom: 40px;
      padding: 20px;
      background: #F2F2F7;
      border-radius: 12px;
    }

    .demo-section p {
      margin-top: 10px;
      color: #8E8E93;
      font-size: 14px;
    }

    .size-demo {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: 20px;
    }
  `]
})
export class DropdownDemoComponent {
  // 基础选项
  basicOptions: DropdownOption[] = [
    { value: 'option1', label: '选项 1' },
    { value: 'option2', label: '选项 2' },
    { value: 'option3', label: '选项 3' },
    { value: 'option4', label: '选项 4' },
    { value: 'option5', label: '选项 5' }
  ];

  // 可搜索选项
  searchableOptions: DropdownOption[] = [
    { value: 'apple', label: '苹果' },
    { value: 'banana', label: '香蕉' },
    { value: 'orange', label: '橙子' },
    { value: 'grape', label: '葡萄' },
    { value: 'watermelon', label: '西瓜' },
    { value: 'strawberry', label: '草莓' },
    { value: 'pineapple', label: '菠萝' },
    { value: 'mango', label: '芒果' }
  ];

  // 带图标选项
  iconOptions: DropdownOption[] = [
    { value: 'home', label: '首页', icon: 'home' },
    { value: 'settings', label: '设置', icon: 'settings' },
    { value: 'profile', label: '个人资料', icon: 'person' },
    { value: 'notifications', label: '通知', icon: 'notifications' },
    { value: 'help', label: '帮助', icon: 'help' }
  ];

  // 分组选项
  groupedOptions: DropdownOption[] = [
    { value: 'fruits', label: '水果', isGroup: true },
    { value: 'apple', label: '苹果', group: 'fruits', icon: 'apple' },
    { value: 'banana', label: '香蕉', group: 'fruits', icon: 'banana' },
    { value: 'orange', label: '橙子', group: 'fruits', icon: 'orange' },
    { value: 'vegetables', label: '蔬菜', isGroup: true },
    { value: 'carrot', label: '胡萝卜', group: 'vegetables', icon: 'carrot' },
    { value: 'broccoli', label: '西兰花', group: 'vegetables', icon: 'broccoli' },
    { value: 'spinach', label: '菠菜', group: 'vegetables', icon: 'spinach' }
  ];

  accessibilityOptions: DropdownOption[] = [
    { value: 'keyboard', label: '键盘导航', description: '支持方向键、Home、End键导航' },
    { value: 'screen-reader', label: '屏幕阅读器', description: '完整的ARIA标签支持' },
    { value: 'high-contrast', label: '高对比度', description: '支持高对比度模式' },
    { value: 'reduced-motion', label: '减少动画', description: '尊重用户的动画偏好设置' },
    { value: 'focus-management', label: '焦点管理', description: '合理的焦点顺序和可见性' },
    { value: 'quick-search', label: '快速搜索', description: '按字母键快速定位选项' },
    { value: 'disabled-option', label: '禁用选项', disabled: true, description: '此选项已禁用，无法选择' }
  ];

  // 选中值
  selectedBasic: any = null;
  selectedMultiple: any[] = [];
  selectedSearchable: any = null;
  selectedIcon: any = null;
  selectedGrouped: any = null;
  selectedAccessibility: any = null;
  selectedDisabled: any = null;
  selectedError: any = null;
  selectedSmall: any = null;
  selectedMedium: any = null;
  selectedLarge: any = null;

  // 事件处理
  onBasicChange(value: any) {
    console.log('基础选择变化:', value);
  }

  onMultipleChange(value: any[]) {
    console.log('多选变化:', value);
  }

  onSearchableChange(value: any) {
    console.log('搜索选择变化:', value);
  }

  onIconChange(value: any) {
    console.log('图标选择变化:', value);
  }

  onGroupedChange(value: any) {
    console.log('分组选择变化:', value);
  }

  onSelectionChange(type: string, value: any) {
    console.log(`${type} selection changed:`, value);
  }
}