import { Component, Input, Output, EventEmitter } from '@angular/core';
import { CommonModule } from '@angular/common';
import { trigger, state, style, transition, animate } from '@angular/animations';
import { SnackNotifyItem } from './snack-notify.interface';

@Component({
  selector: 'app-snack-notify',
  standalone: true,
  imports: [CommonModule],
  templateUrl: './snack-notify.component.html',
  styleUrls: ['./snack-notify.component.scss'],
  animations: [
    trigger('slideIn', [
      state('in', style({ transform: 'translateX(0)', opacity: 1 })),
      state('out', style({ transform: 'translateX(100%)', opacity: 0 })),
      transition('out => in', [
        animate('300ms cubic-bezier(0.4, 0, 0.2, 1)')
      ]),
      transition('in => out', [
        animate('300ms cubic-bezier(0.4, 0, 0.2, 1)')
      ])
    ])
  ]
})
export class SnackNotifyComponent {
  @Input() notification!: SnackNotifyItem;
  @Output() close = new EventEmitter<string>();

  constructor() {}

  /**
   * Obtém as classes CSS para a notificação
   */
  getNotificationClasses(): string {
    const classes = ['snack-notify-item'];
    
    // Adicionar classe do tipo
    classes.push(this.notification.config.type);
    
    // Adicionar classe de visibilidade
    if (this.notification.isVisible) {
      classes.push('visible');
    }
    
    return classes.join(' ');
  }

  /**
   * Manipula o clique no botão de fechar
   */
  onClose(): void {
    this.close.emit(this.notification.id);
  }

  /**
   * Manipula o clique na notificação (opcional - pode fechar ou executar ação)
   */
  onClick(): void {
    // Por enquanto, clicar na notificação a fecha
    // Futuramente pode ser configurável
    this.onClose();
  }
} 