//
//  OrderListItemView.swift
//  SodaLive
//
//  Created by klaus on 2023/08/24.
//

import SwiftUI
import Kingfisher

struct OrderListItemView: View {
    
    let item: GetAudioContentOrderListItem
    
    var body: some View {
        VStack(spacing: 12) {
            HStack(spacing: 10) {
                KFImage(URL(string: item.coverImageUrl))
                    .cancelOnDisappear(true)
                    .downsampling(
                        size: CGSize(
                            width: 80,
                            height: 80
                        )
                    )
                    .resizable()
                    .frame(width: 80, height: 80, alignment: .center)
                    .clipped()
                    .cornerRadius(5.3)
                
                VStack(alignment: .leading, spacing: 0) {
                    HStack(spacing: 8) {
                        Text(item.themeStr)
                            .font(.custom(Font.medium.rawValue, size: 8))
                            .foregroundColor(Color(hex: "3bac6a"))
                            .padding(2.6)
                            .background(Color(hex: "28312b"))
                            .cornerRadius(2.6)
                        
                        Text(item.duration!)
                            .font(.custom(Font.medium.rawValue, size: 8))
                            .foregroundColor(Color(hex: "777777"))
                            .padding(2.6)
                            .background(Color(hex: "222222"))
                            .cornerRadius(2.6)
                    }
                    
                    Text(item.creatorNickname)
                        .font(.custom(Font.medium.rawValue, size: 9))
                        .foregroundColor(Color(hex: "777777"))
                        .padding(.top, 2.6)
                    
                    Text(item.title)
                        .font(.custom(Font.medium.rawValue, size: 12))
                        .foregroundColor(Color(hex: "d2d2d2"))
                        .fixedSize(horizontal: false, vertical: true)
                        .padding(.top, 2.6)
                        .padding(.bottom, 6.7)
                    
                    HStack(spacing: 13.3) {
                        HStack(spacing: 6) {
                            Image("ic_heart_777")
                                .resizable()
                                .frame(width: 13.3, height: 13.3)
                            
                            Text("\(item.likeCount)")
                                .font(.custom(Font.medium.rawValue, size: 10))
                                .foregroundColor(Color(hex: "777777"))
                        }
                        
                        HStack(spacing: 6) {
                            Image("ic_message_square_777")
                                .resizable()
                                .frame(width: 13.3, height: 13.3)
                            
                            Text("\(item.commentCount)")
                                .font(.custom(Font.medium.rawValue, size: 10))
                                .foregroundColor(Color(hex: "777777"))
                        }
                    }
                }
                
                Spacer()
                
                Text(item.orderType == .RENTAL ? "대여중" : "소장중")
                    .font(.custom(Font.medium.rawValue, size: 10.3))
                    .foregroundColor(item.orderType == .RENTAL ? .white : .black)
                    .padding(.horizontal, 5.3)
                    .padding(.vertical, 2.7)
                    .background(Color(hex: item.orderType == .RENTAL ? "660fd4" : "b1ef2c"))
                    .cornerRadius(2.6)
            }
            
            Rectangle()
                .foregroundColor(Color(hex: "595959"))
                .frame(maxWidth: .infinity)
                .frame(height: 0.5)
        }
    }
}
