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

import SwiftUI
import Kingfisher

struct UserProfileLiveView: View {
    
    let userId: Int
    let liveRoomList: [LiveRoomResponse]
    let onClickParticipant: (LiveRoomResponse) -> Void
    let onClickReservation: (LiveRoomResponse) -> Void
    
    var body: some View {
        VStack(spacing: 13.3) {
            ForEach(0..<liveRoomList.count, id: \.self) {
                let liveRoom = liveRoomList[$0]
                VStack(spacing: 13.3) {
                    HStack(spacing: 20) {
                        ZStack(alignment: .topLeading) {
                            KFImage(URL(string: liveRoom.coverImageUrl))
                                .cancelOnDisappear(true)
                                .downsampling(
                                    size: CGSize(
                                        width: 80,
                                        height: 116.7
                                    )
                                )
                                .resizable()
                                .scaledToFill()
                                .frame(width: 80, height: 116.7, alignment: .center)
                                .clipped()
                                .cornerRadius(4.7)
                            
                            if !liveRoom.isActive {
                                Rectangle()
                                    .frame(width: 80, height: 116.7, alignment: .top)
                                    .foregroundColor(Color.gray90.opacity(0.5))
                                    .cornerRadius(4.7)
                            }
                        }
                        
                        VStack(alignment: .leading, spacing: 0) {
                            HStack(alignment: .top, spacing: 0) {
                                VStack(alignment: .leading, spacing: 0) {
                                    Text(liveRoom.beginDateTime)
                                        .font(.custom(Font.medium.rawValue, size: 9.3))
                                        .foregroundColor(Color(hex: "ffd300"))
                                    
                                    Text(liveRoom.managerNickname)
                                        .font(.custom(Font.medium.rawValue, size: 11.3))
                                        .foregroundColor(Color.graybb)
                                        .padding(.top, 10)
                                    
                                    Text(liveRoom.title)
                                        .font(.custom(Font.medium.rawValue, size: 15.3))
                                        .foregroundColor(Color.graye2)
                                        .padding(.top, 6.7)
                                        .lineLimit(1)
                                }
                                
                                Spacer()
                                
                                if liveRoom.isActive {
                                    if liveRoom.channelName != nil {
                                        Text("Live")
                                            .font(.custom(Font.medium.rawValue, size: 11.3))
                                            .foregroundColor(Color.mainRed)
                                            .padding(.horizontal, 7)
                                            .padding(.vertical, 4)
                                            .overlay(
                                                RoundedRectangle(cornerRadius: 3.3)
                                                    .stroke(Color.mainRed, lineWidth: 1)
                                            )
                                    } else {
                                        Text("예정")
                                            .font(.custom(Font.medium.rawValue, size: 11.3))
                                            .foregroundColor(Color(hex: "fdca2f"))
                                            .padding(.horizontal, 9)
                                            .padding(.vertical, 4)
                                            .overlay(
                                                RoundedRectangle(cornerRadius: 3.3)
                                                    .stroke(Color(hex: "fdca2f"), lineWidth: 1)
                                            )
                                    }
                                } else {
                                    Text("종료")
                                        .font(.custom(Font.medium.rawValue, size: 11.3))
                                        .foregroundColor(Color.gray77)
                                        .padding(.horizontal, 9)
                                        .padding(.vertical, 4)
                                        .overlay(
                                            RoundedRectangle(cornerRadius: 3.3)
                                                .stroke(Color.gray77, lineWidth: 1)
                                        )
                                }
                            }
                            
                            Spacer()
                            
                            if liveRoom.isActive {
                                if liveRoom.channelName != nil {
                                    if liveRoom.isPaid || liveRoom.price <= 0 {
                                        Text("지금 참여하기")
                                            .font(.custom(Font.bold.rawValue, size: 13.3))
                                            .foregroundColor(Color.white)
                                            .frame(
                                                width: screenSize().width - 26.7 - 100,
                                                height: 36.7
                                            )
                                            .background(Color.mainRed3)
                                            .cornerRadius(5.3)
                                            .onTapGesture {
                                                onClickParticipant(liveRoom)
                                            }
                                    } else {
                                        Text("\(liveRoom.price)캔으로 지금 참여하기")
                                            .font(.custom(Font.bold.rawValue, size: 13.3))
                                            .foregroundColor(Color.white)
                                            .frame(
                                                width: screenSize().width - 26.7 - 100,
                                                height: 36.7
                                            )
                                            .background(Color.mainRed3)
                                            .cornerRadius(5.3)
                                            .onTapGesture {
                                                onClickParticipant(liveRoom)
                                            }
                                    }
                                } else {
                                    if liveRoom.isReservation {
                                        Text("예약완료")
                                            .font(.custom(Font.bold.rawValue, size: 13.3))
                                            .foregroundColor(Color.gray77)
                                            .frame(
                                                width: screenSize().width - 26.7 - 100,
                                                height: 36.7
                                            )
                                            .background(Color.gray52)
                                            .cornerRadius(5.3)
                                    } else {
                                        Text("\(liveRoom.price > 0 ? "\(liveRoom.price)캔으로 " : "")예약하기")
                                            .font(.custom(Font.bold.rawValue, size: 13.3))
                                            .foregroundColor(Color.black)
                                            .frame(
                                                width: screenSize().width - 26.7 - 100,
                                                height: 36.7
                                            )
                                            .background(Color(hex: "fdca2f"))
                                            .cornerRadius(5.3)
                                            .onTapGesture {
                                                onClickReservation(liveRoom)
                                            }
                                    }
                                }
                            } else {
                                Text("다시듣기를 지원하지 않습니다")
                                    .font(.custom(Font.bold.rawValue, size: 13.3))
                                    .foregroundColor(Color.gray77)
                                    .frame(
                                        width: screenSize().width - 26.7 - 100,
                                        height: 36.7
                                    )
                                    .background(Color.gray52)
                                    .cornerRadius(5.3)
                            }
                        }
                    }
                    .frame(height: 116.7)
                    
                    Rectangle()
                        .frame(height: 1)
                        .foregroundColor(Color.gray90.opacity(0.5))
                }
            }
        }
    }
}