import { Component, Output, EventEmitter, Input, ViewChild, ElementRef } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
import {

  faPaperclip,

} from '@fortawesome/free-solid-svg-icons';

@Component({
  selector: 'app-chat-input',
  standalone: true,
  imports: [CommonModule, FormsModule, FontAwesomeModule],
  templateUrl: './chat-input.html',
  styleUrls: ['./chat-input.scss']
})
export class ChatInput {
  @Input() disabled = false;
  @Output() messageSent = new EventEmitter<string>();
  @Output() fileAttached = new EventEmitter<void>();
  @Output() voiceActivated = new EventEmitter<void>();
  @ViewChild('messageInput') messageInput!: ElementRef<HTMLTextAreaElement>;

  message = '';
  faPaperclip = faPaperclip;

  onSend(): void {
    if (this.message.trim() && !this.disabled) {
      this.messageSent.emit(this.message.trim());
      this.message = '';
      this.adjustTextareaHeight();
    }
  }
  onInputChange(): void {
    const textarea = this.messageInput.nativeElement;
    textarea.style.height = 'auto';
    textarea.style.height = textarea.scrollHeight + 'px';
  }

  onAttach(): void {
    this.fileAttached.emit();
  }

  onVoice(): void {
    this.voiceActivated.emit();
  }

  private adjustTextareaHeight(): void {
    if (this.messageInput) {
      const textarea = this.messageInput.nativeElement;
      textarea.style.height = 'auto';
      textarea.style.height = Math.min(textarea.scrollHeight, 200) + 'px';
    }
  }
}
