micro-frontend/ng-ttc-frontend/src/app/component/chat-widget-component/chat-widget-component.ts

import { ReactiveFormsModule, FormGroup, FormControl, Validators } from '@angular/forms';
import { Component, HostListener } from '@angular/core';

@Component({
  selector: 'app-chat-widget-component',
  standalone: false,
  templateUrl: './chat-widget-component.html',
  styleUrl: './chat-widget-component.css',
})
export class ChatWidgetComponent {
  isOpen = true;
  newMessage = '';
  chatForm!: FormGroup;

  // State สำหรับจัดการขนาด
  isMaximized = false;
  isResizing = false;

  // ขนาดเริ่มต้น (px)
  chatWidth = 320;
  chatHeight = 384;

  // ตัวแปรสำหรับคำนวณการลาก
  private startX = 0;
  private startY = 0;
  private startWidth = 0;
  private startHeight = 0;


  constructor() {
    this.setupFormControl(); // เรียกใช้ตอนเริ่ม Component
  }

  setupFormControl() {
    this.chatForm = new FormGroup({
      message: new FormControl('', [Validators.required])
    });
  }


  messages = [
    { text: 'สวัสดีครับ AI พร้อมช่วยเหลือครับ 👋', isUser: false },
    { text: 'ลองกดปุ่มขยายที่หัวมุม หรือลากมุมซ้ายบนของกล่องเพื่อปรับขนาดได้เลยครับ', isUser: false },
  ];

  toggleChat() {
    this.isOpen = !this.isOpen;
    this.isMaximized = false; // Reset ขนาดเมื่อปิด
  }

  toggleMaximize() {
    this.isMaximized = !this.isMaximized;
  }

  sendMessage() {
    if (this.newMessage.trim()) {
      this.messages.push({ text: this.newMessage, isUser: true });
      this.newMessage = '';
      setTimeout(() => {
        this.messages.push({
          text: 'รับทราบครับ ระบบกำลังประมวลผล...',
          isUser: false
        });
      }, 1000);
    }
  }

  // --- Logic สำหรับการ Resize (ลากขยาย) ---

  startResizing(event: MouseEvent) {
    event.preventDefault(); // ป้องกันการเลือก Text
    this.isResizing = true;

    // บันทึกตำแหน่งเมาส์และขนาดปัจจุบัน
    this.startX = event.clientX;
    this.startY = event.clientY;
    this.startWidth = this.chatWidth;
    this.startHeight = this.chatHeight;
  }

  // ใช้ @HostListener เพื่อดักจับ MouseMove ทั่วทั้ง Window
  @HostListener('window:mousemove', ['$event'])
  onMouseMove(event: MouseEvent) {
    if (!this.isResizing) return;

    // คำนวณความต่าง (Delta)
    // หมายเหตุ: ลากไปทางซ้าย (ค่า X น้อยลง) ต้องทำให้กว้างขึ้น -> ใช้ startX - clientX
    // ลากไปข้างบน (ค่า Y น้อยลง) ต้องทำให้สูงขึ้น -> ใช้ startY - clientY
    const deltaX = this.startX - event.clientX;
    const deltaY = this.startY - event.clientY;

    // กำหนดขนาดใหม่ (จำกัดขนาดต่ำสุดไม่ให้เล็กเกินไป)
    this.chatWidth = Math.max(300, this.startWidth + deltaX);
    this.chatHeight = Math.max(350, this.startHeight + deltaY);
  }

  @HostListener('window:mouseup')
  stopResizing() {
    this.isResizing = false;
  }
}