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

@Component({
  selector: 'app-dropdown-example',
  standalone: true,
  imports: [CommonModule, ReactiveFormsModule, DropdownComponent],
  template: `
    <div class="example-container">
      <h2>下拉列表组件示例</h2>
      
      <form [formGroup]="exampleForm" class="example-form">
        
        <!-- 基础下拉列表 -->
        <div class="form-section">
          <h3>基础下拉列表</h3>
          <app-dropdown
            label="选择部门"
            placeholder="请选择部门..."
            [options]="departmentOptions"
            formControlName="department"
            [required]="true"
            helpText="选择您所在的部门">
          </app-dropdown>
        </div>

        <!-- 可搜索下拉列表 -->
        <div class="form-section">
          <h3>可搜索下拉列表</h3>
          <app-dropdown
            label="选择城市"
            placeholder="搜索或选择城市..."
            [options]="cityOptions"
            formControlName="city"
            [searchable]="true"
            [clearable]="true">
          </app-dropdown>
        </div>

        <!-- 多选下拉列表 -->
        <div class="form-section">
          <h3>多选下拉列表</h3>
          <app-dropdown
            label="选择技能"
            placeholder="选择您的技能..."
            [options]="skillOptions"
            formControlName="skills"
            [multiple]="true"
            [searchable]="true"
            helpText="可以选择多个技能">
          </app-dropdown>
        </div>

        <!-- 带图标的下拉列表 -->
        <div class="form-section">
          <h3>带图标的下拉列表</h3>
          <app-dropdown
            label="选择状态"
            placeholder="选择状态..."
            [options]="statusOptions"
            formControlName="status"
            color="success">
          </app-dropdown>
        </div>

        <!-- 分组下拉列表 -->
        <div class="form-section">
          <h3>分组下拉列表</h3>
          <app-dropdown
            label="选择职位"
            placeholder="选择职位..."
            [options]="positionOptions"
            formControlName="position"
            [searchable]="true">
          </app-dropdown>
        </div>

        <!-- 不同尺寸 -->
        <div class="form-section">
          <h3>不同尺寸</h3>
          <div class="size-examples">
            <app-dropdown
              label="小尺寸"
              placeholder="小尺寸..."
              [options]="sizeOptions"
              formControlName="smallSize"
              size="small">
            </app-dropdown>
            
            <app-dropdown
              label="中等尺寸"
              placeholder="中等尺寸..."
              [options]="sizeOptions"
              formControlName="mediumSize"
              size="medium">
            </app-dropdown>
            
            <app-dropdown
              label="大尺寸"
              placeholder="大尺寸..."
              [options]="sizeOptions"
              formControlName="largeSize"
              size="large">
            </app-dropdown>
          </div>
        </div>

        <!-- 不同样式变体 -->
        <div class="form-section">
          <h3>不同样式变体</h3>
          <div class="variant-examples">
            <app-dropdown
              label="轮廓样式"
              placeholder="轮廓样式..."
              [options]="variantOptions"
              formControlName="outlined"
              variant="outlined">
            </app-dropdown>
            
            <app-dropdown
              label="填充样式"
              placeholder="填充样式..."
              [options]="variantOptions"
              formControlName="filled"
              variant="filled">
            </app-dropdown>
            
            <app-dropdown
              label="标准样式"
              placeholder="标准样式..."
              [options]="variantOptions"
              formControlName="standard"
              variant="standard">
            </app-dropdown>
          </div>
        </div>

        <!-- 错误状态 -->
        <div class="form-section">
          <h3>错误状态</h3>
          <app-dropdown
            label="必填字段"
            placeholder="请选择..."
            [options]="departmentOptions"
            formControlName="requiredField"
            [required]="true"
            [errorMessage]="getErrorMessage('requiredField')">
          </app-dropdown>
        </div>

        <!-- 禁用状态 -->
        <div class="form-section">
          <h3>禁用状态</h3>
          <app-dropdown
            label="禁用的下拉列表"
            placeholder="已禁用..."
            [options]="departmentOptions"
            formControlName="disabled"
            [disabled]="true">
          </app-dropdown>
        </div>

      </form>

      <!-- 表单值显示 -->
      <div class="form-values">
        <h3>表单值</h3>
        <pre>{{ exampleForm.value | json }}</pre>
      </div>
    </div>
  `,
  styles: [`
    .example-container {
      max-width: 800px;
      margin: 0 auto;
      padding: 24px;
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    }

    h2 {
      color: #1D1D1F;
      margin-bottom: 32px;
      text-align: center;
    }

    h3 {
      color: #1D1D1F;
      margin-bottom: 16px;
      font-size: 18px;
      font-weight: 600;
    }

    .example-form {
      display: flex;
      flex-direction: column;
      gap: 32px;
    }

    .form-section {
      display: flex;
      flex-direction: column;
      gap: 16px;
    }

    .size-examples,
    .variant-examples {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: 16px;
    }

    .form-values {
      margin-top: 32px;
      padding: 16px;
      background: #F8F9FA;
      border-radius: 8px;
      border: 1px solid #E9ECEF;
    }

    .form-values pre {
      margin: 0;
      font-size: 12px;
      color: #495057;
      white-space: pre-wrap;
      word-break: break-word;
    }

    @media (max-width: 768px) {
      .example-container {
        padding: 16px;
      }

      .size-examples,
      .variant-examples {
        grid-template-columns: 1fr;
      }
    }
  `]
})
export class DropdownExampleComponent {
  exampleForm: FormGroup;

  // 部门选项
  departmentOptions: DropdownOption[] = [
    { value: 'design', label: 'UI设计部', icon: 'design_services' },
    { value: 'development', label: '前端开发部', icon: 'code' },
    { value: 'backend', label: '后端开发部', icon: 'storage' },
    { value: 'product', label: '产品部', icon: 'lightbulb' },
    { value: 'marketing', label: '市场部', icon: 'campaign' },
    { value: 'hr', label: '人事部', icon: 'people' }
  ];

  // 城市选项
  cityOptions: DropdownOption[] = [
    { value: 'beijing', label: '北京', icon: 'location_city' },
    { value: 'shanghai', label: '上海', icon: 'location_city' },
    { value: 'guangzhou', label: '广州', icon: 'location_city' },
    { value: 'shenzhen', label: '深圳', icon: 'location_city' },
    { value: 'hangzhou', label: '杭州', icon: 'location_city' },
    { value: 'nanjing', label: '南京', icon: 'location_city' },
    { value: 'wuhan', label: '武汉', icon: 'location_city' },
    { value: 'chengdu', label: '成都', icon: 'location_city' },
    { value: 'xian', label: '西安', icon: 'location_city' },
    { value: 'qingdao', label: '青岛', icon: 'location_city' }
  ];

  // 技能选项
  skillOptions: DropdownOption[] = [
    { value: 'html', label: 'HTML', icon: 'code' },
    { value: 'css', label: 'CSS', icon: 'palette' },
    { value: 'javascript', label: 'JavaScript', icon: 'javascript' },
    { value: 'typescript', label: 'TypeScript', icon: 'code' },
    { value: 'angular', label: 'Angular', icon: 'web' },
    { value: 'react', label: 'React', icon: 'web' },
    { value: 'vue', label: 'Vue.js', icon: 'web' },
    { value: 'nodejs', label: 'Node.js', icon: 'storage' },
    { value: 'python', label: 'Python', icon: 'code' },
    { value: 'java', label: 'Java', icon: 'code' }
  ];

  // 状态选项
  statusOptions: DropdownOption[] = [
    { value: 'active', label: '活跃', icon: 'check_circle' },
    { value: 'inactive', label: '非活跃', icon: 'pause_circle' },
    { value: 'pending', label: '待处理', icon: 'schedule' },
    { value: 'blocked', label: '已阻止', icon: 'block' }
  ];

  // 职位选项（分组）
  positionOptions: DropdownOption[] = [
    { value: 'ui-junior', label: '初级UI设计师', group: '设计部门', icon: 'design_services' },
    { value: 'ui-senior', label: '高级UI设计师', group: '设计部门', icon: 'design_services' },
    { value: 'ux-designer', label: 'UX设计师', group: '设计部门', icon: 'psychology' },
    { value: 'frontend-junior', label: '初级前端工程师', group: '开发部门', icon: 'code' },
    { value: 'frontend-senior', label: '高级前端工程师', group: '开发部门', icon: 'code' },
    { value: 'backend-junior', label: '初级后端工程师', group: '开发部门', icon: 'storage' },
    { value: 'backend-senior', label: '高级后端工程师', group: '开发部门', icon: 'storage' },
    { value: 'product-manager', label: '产品经理', group: '产品部门', icon: 'lightbulb' },
    { value: 'product-owner', label: '产品负责人', group: '产品部门', icon: 'lightbulb' }
  ];

  // 尺寸选项
  sizeOptions: DropdownOption[] = [
    { value: 'xs', label: '超小' },
    { value: 's', label: '小' },
    { value: 'm', label: '中' },
    { value: 'l', label: '大' },
    { value: 'xl', label: '超大' }
  ];

  // 样式变体选项
  variantOptions: DropdownOption[] = [
    { value: 'option1', label: '选项一' },
    { value: 'option2', label: '选项二' },
    { value: 'option3', label: '选项三' }
  ];

  constructor(private fb: FormBuilder) {
    this.exampleForm = this.fb.group({
      department: ['', Validators.required],
      city: [''],
      skills: [[]],
      status: [''],
      position: [''],
      smallSize: [''],
      mediumSize: [''],
      largeSize: [''],
      outlined: [''],
      filled: [''],
      standard: [''],
      requiredField: ['', Validators.required],
      disabled: [{ value: 'design', disabled: true }]
    });
  }

  getErrorMessage(fieldName: string): string {
    const control = this.exampleForm.get(fieldName);
    if (control?.errors && control.touched) {
      if (control.errors['required']) {
        return '此字段为必填项';
      }
    }
    return '';
  }
}