AcaMate_iOS/AcaMate/1. View/12. Main/123. Chatting/ChattingView.swift

//
//  ChattingView.swift
//  AcaMate
//
//  Created by TAnine on 2/11/25.
//

import SwiftUI

struct ChattingView: View {
    @StateObject private var topVM = TopViewModel()
    @StateObject private var btnVM = ButtonViewModel()
    
    @State private var scrollOffset: CGPoint = .zero
    
    @State private var leftBtnID = UUID()
    @State private var rightBtnID = UUID()
    
    let classList = [
        SummaryChat(id: "00", chatName: "Class 101", teacherName: "홍길동",
                    lastMessage: "여기에는 채팅이 나올 예정입니다. 2줄 정도로 나올 예정이며 끝자리는 잘려서 나올 것 입니다. 이정도의 채팅으로는 택도 없어서 조금 더 길게 길게 작성을 해봅니다.",
                    dayDate: "2025. 02. 14", timeDate: "PM 11:00", notiState: true, groupNum: 12),
        SummaryChat(id: "01", chatName: "Class 101", teacherName: "홍길동",
                    lastMessage: "여기에는 채팅이 나올 예정입니다. 2줄 정도로 나올 예정이며 끝자리는 잘려서 나올 것 입니다. 이정도의 채팅으로는 택도 없어서 조금 더 길게 길게 작성을 해봅니다.",
                    dayDate: "2025. 02. 14", timeDate: "PM 11:00", notiState: false, groupNum: 12),
        SummaryChat(id: "02", chatName: "Class 101", teacherName: "홍길동",
                    lastMessage: "여기에는 채팅이 나올 예정입니다. 2줄 정도로 나올 예정이며 끝자리는 잘려서 나올 것 입니다. 이정도의 채팅으로는 택도 없어서 조금 더 길게 길게 작성을 해봅니다.",
                    dayDate: "2025. 02. 14", timeDate: "PM 11:00", notiState: true, groupNum: 12)
    ]
    
    //MARK: - 변경 값
    @Binding var myType: UserType
    
    @State var chatMenu: chatType = .Class
    
    var body: some View {
        
        VStack(spacing: 0) {
            TopView(topVM: topVM)
            if myType == .ETC || myType == .Employee {
                EmptyBoxView(title: "이용하실 수 없는 기능입니다.")
                    .padding(24)
                Spacer(minLength: 1)
            } else {
                if myType == .Teacher || myType == .Admin {
                    if myType == .Admin {
                        HStack {
                            SimpleBtnView(vm: btnVM, id: leftBtnID)
                            Spacer(minLength: 1)
                            Text("선생님 이름")
                                .font(.nps(font: .bold, size: 24))
                                .foregroundStyle(Color(.Text.detail))
                            Spacer(minLength: 1)
                            SimpleBtnView(vm: btnVM, id: rightBtnID)
                        }
                        .padding(EdgeInsets(top: 12, leading: 24, bottom: 0, trailing: 24))
                    }
                    
                    HStack {
                        SelectChatMenu(chatMenu: $chatMenu, tag: .Class, image: Image(.Icon.group), title: "클래스")
                        Spacer(minLength: 1)
                        SelectChatMenu(chatMenu: $chatMenu, tag: .Student, image: Image(.Icon.talk), title: "학생")
                        Spacer(minLength: 1)
                        SelectChatMenu(chatMenu: $chatMenu, tag: .Parent, image: Image(.Icon.talk), title: "학부모")
                    }
                    
                    .padding(EdgeInsets(top: 12, leading: 24, bottom: 12, trailing: 24))
                }
                OffsetObservableScrollView(showsIndicators: false, scrollOffset: $scrollOffset) { proxy in
                    VStack(spacing: 24) {
                        Group {
                            if myType != .Parent {
                                DashBoardView(image: Image(.Icon.group), title: "클래스") {
                                    ChatListView(chatList: classList)
                                }
                            }
                            if myType != .Teacher || myType != .Admin  {
                                DashBoardView(image: Image(.Icon.talk), title: "선생님과 1:1") {
                                    
                                }
                            }
                            if myType == .Teacher {
                                DashBoardView(image: Image(.Icon.talk), title: "부모님과 1:1") {
                                    
                                }
                            }
                        }
                        .background {
                            RoundedRectangle(cornerRadius: 8)
                                .foregroundStyle(Color(.Other.cell))
                        }
                    }
                    .padding(EdgeInsets(
                        top: (myType == .Student || myType == .Parent) ? 24 : 12, leading: 24, bottom: 24, trailing: 24))
                }
                .frame(maxWidth: .infinity, maxHeight: .infinity)
            }
            
        }
        .onAppear {
            // MARK: TO-DO
            // 여기도 수정봐야 함
            topVM.titleName = "Name"
            
            if myType == .Student {
                topVM.setLeftBtn(Image(.Icon.face), size: CGPoint(x: 40, y: 40), action: leftAct)
            } else {
                topVM.setLeftBtn(text: "\(myType.rawValue)", font: .nps(font: .bold, size: 24),
                                 size: CGPoint(x: 40, y: 40), action: leftAct)
            }
            topVM.setRightBtn(size: CGPoint(x: 40, y: 40), action: rightAct)
            
            btnVM.setImage(for: leftBtnID, newImage: Image(.Icon.left))
            btnVM.setImage(for: rightBtnID, newImage: Image(.Icon.right))
            btnVM.setSize(for: leftBtnID, newWidth: 24, newHeight: 24)
            btnVM.setSize(for: rightBtnID, newWidth: 24, newHeight: 24)
        }
    }
    
    func leftAct() {
        printLog("왼쪽 버튼 클릭")
    }
    func rightAct() {
        printLog("오른쪽 버튼 클릭")
    }
}

struct SelectChatMenu: View {
    @Binding var chatMenu: chatType
    let tag: chatType
    let image: Image
    let title: String
    
    var body: some View {
        HStack(alignment: .center, spacing: 4) {
            if chatMenu == tag {
                image.resizable()
                    .frame(width: 24, height: 24, alignment: .center)
                Text("\(title)")
                    .font(.nps(font: .bold, size: 24))
                    .foregroundStyle(Color(.Text.detail))
            } else {
                image.resizable()
                    .renderingMode(.template)
                    .frame(width: 24, height: 24, alignment: .center)
                    .foregroundStyle(Color(.Disable.normal))
                Text("\(title)")
                    .font(.nps(size: 20))
                    .foregroundStyle(Color(.Disable.normal))
            }
        }
        .padding(2)
        .background {
            if chatMenu == tag {
                RoundedRectangle(cornerRadius: 4)
                    .foregroundStyle(Color.Other.cell)
            }
        }
        .onTapGesture {
            chatMenu = tag
        }

    }
}