//
//  MyLiveReservationItemView.swift
//  SodaLive
//
//  Created by klaus on 2023/08/10.
//

import SwiftUI
import Kingfisher

struct MyLiveReservationItemView: View {
    
    let item: GetRoomListResponse
    let index: Int
    
    var body: some View {
        VStack(alignment: .leading, spacing: 8) {
            if index == 0 {
                HStack(spacing: 8) {
                    Image("ic_mic_colored")
                    
                    Text("내가 개설한 라이브")
                        .font(.custom(Font.bold.rawValue, size: 16))
                        .foregroundColor(Color(hex: "3bb9f1"))
                }
            }
            
            VStack(alignment: .leading, spacing: 13.3) {
                HStack(alignment: .top, spacing: 20) {
                    ZStack(alignment: .topLeading) {
                        KFImage(URL(string: item.coverImageUrl))
                            .cancelOnDisappear(true)
                            .downsampling(
                                size: CGSize(
                                    width: 80,
                                    height: 116
                                )
                            )
                            .resizable()
                            .scaledToFill()
                            .frame(width: 80, height: 116, alignment: .top)
                            .cornerRadius(4.7)
                            .clipped()
                    }
                    
                    HStack(alignment: .center, spacing: 0) {
                        VStack(alignment: .leading, spacing: 0) {
                            Text(item.beginDateTime)
                                .font(.custom(Font.medium.rawValue, size: 9.3))
                                .foregroundColor(Color(hex: "ffd300"))
                            
                            Text(item.creatorNickname)
                                .font(.custom(Font.medium.rawValue, size: 11.3))
                                .foregroundColor(Color(hex: "bbbbbb"))
                                .padding(.top, 10)
                            
                            Text(item.title)
                                .font(.custom(Font.medium.rawValue, size: 15.3))
                                .foregroundColor(Color(hex: "e2e2e2"))
                                .padding(.top, 4.3)
                        }
                    }.frame(height: 116)
                    
                    Spacer()
                    
                    if item.isPrivateRoom {
                        Image("ic_lock")
                            .resizable()
                            .frame(width: 20, height: 20)
                            .padding(.trailing, 13.3)
                            .padding(.top, 13.3)
                    }
                }
                .overlay(
                    RoundedRectangle(cornerRadius: 8)
                        .stroke(Color(hex: "3bb9f1"), lineWidth: 1)
                )
                
                Divider()
                    .frame(height: 1)
                    .background(Color(hex: "909090").opacity(0.5))
            }.frame(width: screenSize().width - 26.7)
        }
    }
}

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