import { Component, Input, Output, EventEmitter } from '@angular/core';
import { CommonModule } from '@angular/common';

@Component({
  selector: 'app-test-dynamic',
  standalone: true,
  imports: [CommonModule],
  template: `
    <div class="test-dynamic-component">
      <h3>🚀 Componente Dinâmico Funcionando!</h3>
      <p>Este é um componente criado dinamicamente para a sub-aba: <strong>{{ title }}</strong></p>
      <p>Dados iniciais: {{ initialData | json }}</p>
      <button (click)="onTestClick()" class="btn btn-primary">
        Testar Evento
      </button>
    </div>
  `,
  styles: [`
    .test-dynamic-component {
      padding: 20px;
      border: 2px dashed #007bff;
      border-radius: 8px;
      background-color: #f8f9fa;
      margin: 10px 0;
    }
    
    .test-dynamic-component h3 {
      color: #007bff;
      margin-bottom: 15px;
    }
    
    .btn {
      padding: 8px 16px;
      border: none;
      border-radius: 4px;
      cursor: pointer;
    }
    
    .btn-primary {
      background-color: #007bff;
      color: white;
    }
    
    .btn-primary:hover {
      background-color: #0056b3;
    }
  `]
})
export class TestDynamicComponent {
  @Input() title: string = 'Teste';
  @Input() initialData: any = {};
  @Input() isReadonly: boolean = false;
  @Input() showSaveButton: boolean = true;
  @Input() showCancelButton: boolean = true;
  
  @Output() dataChange = new EventEmitter<any>();
  @Output() testEvent = new EventEmitter<string>();

  onTestClick() {
    const testData = {
      message: 'Evento disparado do componente dinâmico!',
      timestamp: new Date().toISOString(),
      title: this.title
    };
    
    this.dataChange.emit(testData);
    this.testEvent.emit('Teste do componente dinâmico');
    
    console.log('🎯 Evento disparado do componente dinâmico:', testData);
  }
} 