import {Component, HostListener, inject, input} from '@angular/core';
import {TuiAppearance, TuiButton, TuiGroup, TuiIcon, TuiScrollbarDirective} from '@taiga-ui/core';
import {TranslatePipe} from '@ngx-translate/core';
import {ServiceManager} from '../../../service-manager';
import {MessageBoxViewModel} from './message-box-viewmodel';
import {FormsModule} from '@angular/forms';

@Component({
  selector: 'message-box',
  imports: [
    TuiAppearance,
    TranslatePipe,
    TuiScrollbarDirective,
    TuiGroup,
    TuiIcon,
    TuiButton,
    FormsModule
  ],
  templateUrl: './message-box.html',
  styleUrl: './message-box.scss',
})
export class MessageBox {
  viewModel = input.required<MessageBoxViewModel>()

  textareaHeight = 25
  messageBoxRadius = 200

  private dragCounter = 0;
  isDraggingOverWindow = false;

  @HostListener('window:dragenter', ['$event'])
  onDragEnter(event: DragEvent) {
    event.preventDefault();
    this.dragCounter++;

    if (this.dragCounter === 1) {
      this.isDraggingOverWindow = true;
      console.log("Drag entered the window area");
    }
  }

  @HostListener('window:dragleave', ['$event'])
  onDragLeave(event: DragEvent) {
    event.preventDefault();
    this.dragCounter--;

    if (this.dragCounter === 0) {
      this.isDraggingOverWindow = false;
      console.log("Drag left the window completely");
    }
  }

  onTextAreaInput(e: HTMLTextAreaElement) {
    const calculatedHeight = e.value.split(/\r?\n/).length * 25
    const calculatedRadius = (200 - this.textareaHeight)
    this.textareaHeight = calculatedHeight > 180 ? 180 : calculatedHeight
    this.messageBoxRadius = calculatedRadius < 30 ? 30 : calculatedRadius
  }
}