import { Component, inject, signal } from '@angular/core';
import { Router } from "@angular/router";
import { ReactiveFormsModule, FormControl } from "@angular/forms";
import { addIcons } from "ionicons";
import { closeOutline } from "ionicons/icons";
import { IonIcon, IonInput, IonItem, IonModal } from "@ionic/angular/standalone";
import { discussionsService } from "../../../core/chat/discussion.service";
import { CommonModule } from "@angular/common";

@Component({
  selector: 'app-menu-nav',
  imports: [CommonModule, IonModal, IonItem, IonInput, IonIcon, ReactiveFormsModule],
  templateUrl: './menu-nav.component.html',
  styleUrl: './menu-nav.component.css'
})
export class MenuNav {

  private router = inject(Router);
  private discussionService = inject(discussionsService);

  isModalOpen = signal(false);
  isLoading = signal(false);
  errorMsg = signal<string | null>(null);

  username = new FormControl('');

  constructor() {
    addIcons({ closeOutline });
  }

  openNav() { this.isModalOpen.set(true); }

  closeNav() {
    this.isModalOpen.set(false);
    this.username.reset();
    this.errorMsg.set(null);
  }

  startConversation() {
    const name = this.username.value?.trim();
    if (!name || this.isLoading()) return;

    this.isLoading.set(true);
    this.errorMsg.set(null);

    this.discussionService.createPrivateDiscussion(name).subscribe({
      next: (discussion) => {
        this.isLoading.set(false);
        this.closeNav();
        this.router.navigate(['/main/messages', discussion.id]);
      },
      error: (err) => {
        this.isLoading.set(false);
        this.errorMsg.set(
            err.status === 404 ? 'Utilisateur introuvable.' : 'Une erreur est survenue.'
        );
      }
    });
  }
}