//
//  UserProfileFanTalkView.swift
//  SodaLive
//
//  Created by klaus on 2023/08/11.
//

import SwiftUI
import Kingfisher

struct UserProfileFanTalkView: View {
    
    @StateObject var viewModel = UserProfileFanTalkViewModel()
    
    let userId: Int
    let cheers: GetCheersResponse
    let errorPopup: (String) -> Void
    let reportPopup: (Int) -> Void
    let deletePopup: (Int) -> Void
    let profilePopup: (Int) -> Void
    
    @Binding var isLoading: Bool
    @State private var cheersContent: String = ""
    
    var body: some View {
        VStack(alignment: .leading, spacing: 0) {
            HStack(spacing: 0) {
                Text("팬 Talk")
                    .font(.custom(Font.bold.rawValue, size: 16.7))
                    .foregroundColor(Color.grayee)
                
                Spacer()
                
                Text("전체보기")
                    .font(.custom(Font.light.rawValue, size: 11.3))
                    .foregroundColor(Color.graybb)
                    .onTapGesture {
                        AppState.shared.setAppStep(step: .userProfileFanTalkAll(userId: userId))
                    }
            }
            .padding(.horizontal, 13.3)
            
            VStack(alignment: .leading, spacing: 0) {
                HStack(spacing: 6.7) {
                    Text("응원")
                        .font(.custom(Font.medium.rawValue, size: 14.7))
                        .foregroundColor(Color.grayee)
                    
                    Text("\(cheers.totalCount)")
                        .font(.custom(Font.medium.rawValue, size: 12))
                        .foregroundColor(Color.gray77)
                }
                .padding(.top, 20)
                
                Rectangle()
                    .frame(height: 1)
                    .foregroundColor(Color.gray90.opacity(0.5))
                    .padding(.top, 13.3)
                
                HStack(spacing: 0) {
                    TextField("응원댓글을 입력하세요", text: $cheersContent)
                        .autocapitalization(.none)
                        .disableAutocorrection(true)
                        .font(.custom(Font.medium.rawValue, size: 13.3))
                        .foregroundColor(Color.grayee)
                        .accentColor(Color.button)
                        .keyboardType(.default)
                        .padding(.horizontal, 13.3)
                    
                    Spacer()
                    
                    Image("btn_message_send")
                        .resizable()
                        .frame(width: 35, height: 35)
                        .padding(6.7)
                        .onTapGesture {
                            hideKeyboard()
                            viewModel.writeCheers(creatorId: userId, cheersContent: cheersContent)
                            cheersContent = ""
                        }
                }
                .background(Color.gray23)
                .cornerRadius(10)
                .overlay(
                    RoundedRectangle(cornerRadius: 10)
                        .strokeBorder(lineWidth: 1)
                        .foregroundColor(Color.button)
                )
                .padding(.top, 13.3)
                
                Rectangle()
                    .frame(height: 1)
                    .foregroundColor(Color.gray90.opacity(0.5))
                    .padding(.top, 13.3)
                
                VStack(spacing: 20) {
                    if viewModel.cheersTotalCount > 0 {
                        ForEach(0..<viewModel.cheersList.count, id: \.self) {
                            let cheer = viewModel.cheersList[$0]
                            UserProfileFanTalkCheersItemView(
                                userId: userId,
                                cheersItem: cheer,
                                writeCheerReply: { cheersReplyContent in
                                    viewModel.writeCheersReply(parentCheersId: cheer.cheersId, creatorId: userId, cheersReplyContent: cheersReplyContent)
                                },
                                modifyCheer: { cheersId, cheersReplyContent in
                                    viewModel.modifyCheers(cheersId: cheersId, creatorId: userId, cheersContent: cheersReplyContent)
                                },
                                reportPopup: { cheersId in
                                    reportPopup(cheersId)
                                },
                                onClickDelete: { cheersId in
                                    deletePopup(cheersId)
                                },
                                onClickProfile: {
                                    profilePopup($0)
                                }
                            )
                            .onTapGesture {
                                hideKeyboard()
                            }
                        }
                    } else {
                        Text("응원이 없습니다.\n\n처음으로 응원을 해보세요!")
                            .font(.custom(Font.light.rawValue, size: 13.3))
                            .foregroundColor(Color.graybb)
                            .multilineTextAlignment(.center)
                            .fixedSize(horizontal: false, vertical: true)
                            .padding(.vertical, 60)
                            .frame(width: screenSize().width - 26.7)
                    }
                }
                .padding(.top, 20)
            }
            .frame(width: screenSize().width - 26.7)
            .padding(.horizontal, 13.3)
        }
        .onTapGesture { hideKeyboard() }
        .onAppear {
            viewModel.pageSize = 4
            viewModel.setLoading = {
                isLoading = $0
            }
            viewModel.errorPopup = errorPopup
            
            viewModel.cheersList.removeAll()
            viewModel.cheersTotalCount = cheers.totalCount
            viewModel.cheersList.append(contentsOf: cheers.cheers)
        }
    }
}