import { Component, Input, Output, EventEmitter } from '@angular/core';
import { NgClass, NgIf, DatePipe } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { ChatbotConversation } from '../../services/conversations.service';

@Component({
  selector: 'app-conversation-item',
  standalone: true,
  imports: [NgClass, NgIf, DatePipe, FormsModule],
  templateUrl: './conversation-item.html',
  styleUrl: './conversation-item.scss'
})
export class ConversationItem {
  @Input() conversation: ChatbotConversation = new ChatbotConversation();
  @Input() isActive: boolean = false;

  @Output() onSelect = new EventEmitter<ChatbotConversation>();
  @Output() onShare = new EventEmitter<ChatbotConversation>();
  @Output() onRename = new EventEmitter<ChatbotConversation>();
  @Output() onPin = new EventEmitter<ChatbotConversation>();
  @Output() onDelete = new EventEmitter<ChatbotConversation>();

  isDropdownActive: boolean = false;

  toggleDropdown() {
    this.isDropdownActive = !this.isDropdownActive;
  }

  selectConversation() {
    this.onSelect.emit(this.conversation);
  }

  shareConversation(event: Event) {
    event.stopPropagation();
    this.onShare.emit(this.conversation);
  }

  renameConversation(event: Event) {
    event.stopPropagation();
    this.onRename.emit(this.conversation);
  }

  pinConversation(event: Event) {
    event.stopPropagation();
    this.onPin.emit(this.conversation);
  }

  deleteConversation(event: Event) {
    event.stopPropagation();
    this.onDelete.emit(this.conversation);
  }
}
