//
//  LiveNowAllItemView.swift
//  SodaLive
//
//  Created by klaus on 2023/08/14.
//

import SwiftUI
import Kingfisher

struct LiveNowAllItemView: View {
    
    let item: GetRoomListResponse
    let itemWidth: CGFloat
    
    var body: some View {
        VStack(alignment: .leading, spacing: 8) {
            ZStack {
                KFImage(URL(string: item.coverImageUrl))
                    .resizable()
                    .scaledToFill()
                    .frame(width: itemWidth, height: itemWidth * 144 / 102, alignment: .center)
                    .cornerRadius(4.7)
                    .clipped()
                
                LinearGradient(
                    colors: [Color.black.opacity(0.1), Color.black.opacity(0.8)],
                    startPoint: .top,
                    endPoint: .bottom
                )
                
                VStack(alignment: .trailing, spacing: 0) {
                    HStack(spacing: 0) {
                        HStack(spacing: 1) {
                            if item.price > 0 {
                                Image("ic_can_white")
                            }
                            
                            Text(item.price > 0 ? "\(item.price)" : "무료")
                                .font(.custom(Font.medium.rawValue, size: 12))
                                .foregroundColor(Color.white)
                        }
                        .padding(.horizontal, 7.3)
                        .padding(.vertical, 4)
                        .background(item.price > 0 ? Color.mainRed3 : Color.gray11)
                        .cornerRadius(13.3)
                        
                        Spacer()
                        
                        if item.isPrivateRoom {
                            Image("ic_lock")
                                .resizable()
                                .frame(width: 20, height: 20)
                                .padding(2.7)
                                .background(Color.gray33.opacity(0.7))
                                .clipShape(Circle())
                        }
                    }
                    .padding(.horizontal, 3.3)
                    .padding(.top, 3.3)
                    
                    Spacer()
                    
                    if item.numberOfPeople - item.numberOfParticipate < 3 {
                        HStack(spacing: 0) {
                            Spacer()
                            
                            HStack(spacing: 2) {
                                Text("잔여")
                                    .font(.custom(Font.medium.rawValue, size: 12))
                                    .foregroundColor(Color.grayee)
                                
                                Text("\(item.numberOfPeople - item.numberOfParticipate)")
                                    .font(.custom(Font.medium.rawValue, size: 12))
                                    .foregroundColor(Color.button)
                            }
                            .padding(.horizontal, 4)
                            .padding(.vertical, 3)
                            .background(Color.gray33.opacity(0.7))
                            .cornerRadius(13.3)
                        }
                        .padding(.horizontal, 3.3)
                        .padding(.bottom, 3.3)
                    }
                }
            }
            .frame(width: itemWidth, height: itemWidth * 144 / 102)
            
            Text("\(item.title)")
                .font(.custom(Font.medium.rawValue, size: 12))
                .foregroundColor(Color(hex: "eeeeee"))
                .lineLimit(2)
                .fixedSize(horizontal: false, vertical: true)
            
            if item.tags.count > 0 {
                Text("\(item.tags.map { "#\($0)" }.joined(separator: " "))")
                    .font(.custom(Font.medium.rawValue, size: 11))
                    .foregroundColor(Color.button)
            }
            
            HStack(spacing: 5.3) {
                KFImage(URL(string: item.creatorProfileImage))
                    .resizable()
                    .scaledToFill()
                    .frame(width: 21.3, height: 21.3, alignment: .center)
                    .clipShape(Circle())
                
                Text("\(item.creatorNickname)")
                    .font(.custom(Font.medium.rawValue, size: 10))
                    .foregroundColor(Color.gray77)
            }
        }
        .frame(width: itemWidth)
    }
}

struct LiveNowAllItemView_Previews: PreviewProvider {
    static var previews: some View {
        LiveNowAllItemView(
            item: GetRoomListResponse(
                roomId: 99,
                title: "testtesttesttesttesttesttesttesttesttesttesttesttesttesttesttest",
                content: "testtest",
                beginDateTime: "2022.05.23 Mon 03:00 PM",
                numberOfParticipate: 3,
                numberOfPeople: 5,
                coverImageUrl: "https://test-cf.sodalive.net/profile/default-profile.png",
                isAdult: true,
                price: 20,
                tags: ["팬미팅", "힐링"],
                channelName: nil,
                creatorProfileImage: "https://test-cf.sodalive.net/profile/default-profile.png",
                creatorNickname: "user8",
                creatorId: 19,
                isReservation: false,
                isPrivateRoom: true
            ),
            itemWidth: 102
        )
    }
}