import { Component, Input, Output, EventEmitter, OnInit } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
import {
  faBars,
  faComments,
  faFolder,
  faChevronDown,
  faChevronRight,
  faQuestionCircle,
  faCog
} from '@fortawesome/free-solid-svg-icons';
import { Conversation, Project } from '../../models/data.model';
import { DataService } from '../../services/data.service';

@Component({
  selector: 'app-sidebar',
  standalone: true,
  imports: [CommonModule, FontAwesomeModule],
  templateUrl: './sidebar.html',
  styleUrls: ['./sidebar.scss']
})
export class Sidebar implements OnInit {
  @Input() isCollapsed = false;
  @Output() newChat = new EventEmitter<void>();
  @Output() conversationSelected = new EventEmitter<string>();
  @Output() toggleSidebar = new EventEmitter<void>();

  conversations: Conversation[] = [];
  projects: Project[] = [];
  currentConversationId: string | null = null;

  faComments = faComments;
  faFolder = faFolder;
  faChevronDown = faChevronDown;
  faChevronRight = faChevronRight;
  faQuestionCircle = faQuestionCircle;
  faCog = faCog;

  constructor(private dataService: DataService) {}

  ngOnInit(): void {
    this.dataService.getConversations().subscribe(conversations => {
      this.conversations = conversations;
    });

    this.dataService.getProjects().subscribe(projects => {
      this.projects = projects;
    });

    this.dataService.getCurrentConversation().subscribe(conversation => {
      this.currentConversationId = conversation?.id || null;
    });
  }

  onNewChat(): void {
    this.newChat.emit();
  }

  onSelectConversation(id: string): void {
    console.log(id);
    this.conversationSelected.emit(id);
  }

  onToggleSidebar(): void {
    this.toggleSidebar.emit();
  }

  onToggleProject(projectId: string): void {
    this.dataService.toggleProject(projectId);
  }
}
