//
//  ChattingRoomView.swift
//  AcaMate
//
//  Created by TAnine on 2/17/25.
//

import SwiftUI

struct ChattingRoomView: View {
    @EnvironmentObject var appVM: AppViewModel
    @StateObject private var topVM = TopViewModel()
    
    
//    @StateObject private var chatVM = ChatViewModel()
    
    @StateObject private var btnVM = ButtonViewModel()
    @State var sendBtnID = UUID()
    @State var addSomeBtnID = UUID()
    @State var callCameraBtnID = UUID()
    @State var addPhotoBtnID = UUID()
    
    @State private var scrollOffset: CGPoint = .zero
    
    @StateObject private var socketManager = WebSocketManager()
    @State private var message = ""
    
    let roomID: String
    var body: some View {
        VStack(alignment: .center, spacing: 0) {
            TopView(topVM: topVM)
            Text("Hello, World! \(roomID)")
            OffsetObservableScrollView(showsIndicators: false, scrollOffset: $scrollOffset) { proxy in
                
            }.frame(maxWidth: .infinity, maxHeight: .infinity)
            
            TextField("SEND MESSAGE", text: $message)
                .textFieldStyle(RoundedBorderTextFieldStyle())
                .padding()
            HStack(spacing: 10) {
                Button {
                    socketManager.connect()
                } label: {
                  Text("CONNECT")
                }
                Button {
                    socketManager.sendMessage(message)
                    message = ""
                } label: {
                  Text("SEND")
                }
                Button {
                    socketManager.disconnect()
                } label: {
                  Text("DISCONNECT")
                }
            }
            List(socketManager.receivedMessage, id: \.self) { msg in
                Text(msg)
                    .foregroundStyle(Color(.Other.cell))
            }
            
            .fullDrawView(Color(.Other.cell))
        }
        
        .onAppear {
            topVM.titleName = "클래스 명"
            topVM.setLeftBtn(Image(.Icon.back), size: CGPoint(x:40, y:40)) {
                appVM.naviState.set(act: .POP, path: .ChatRoom(id: roomID))
            }
            topVM.setRightBtn(Image(.Icon.setting), size: CGPoint(x: 40, y: 40)) {
                // MARK: TO-DO
                // 채팅방 설정 열기
            }
        }
    }
}