//
//  SeriesListItemView.swift
//  SodaLive
//
//  Created by klaus on 4/29/24.
//

import SwiftUI

import Kingfisher

struct SeriesListItemView: View {
    
    let itemWidth: CGFloat
    let item: SeriesListItem
    
    var body: some View {
        VStack(alignment: .leading, spacing: 8) {
            ZStack {
                KFImage(URL(string: item.coverImage))
                    .resizable()
                    .scaledToFill()
                    .frame(width: itemWidth, height: itemWidth * 432 / 306)
                    .cornerRadius(5)
                    .clipped()
                
                VStack(alignment: .leading, spacing: 0) {
                    HStack(spacing: 3.3) {
                        if !item.isComplete && item.isNew {
                            SeriesItemBadgeView(title: "신작", backgroundColor: .button)
                        }
                        
                        if item.isComplete {
                            SeriesItemBadgeView(title: "완결", backgroundColor: Color(hex: "002abd"))
                        }
                        
                        if item.isPopular {
                            SeriesItemBadgeView(title: "인기", backgroundColor: Color(hex: "ec6033"))
                        }
                        
                        Spacer()
                    }
                    
                    Spacer()
                    
                    HStack {
                        Spacer()
                        
                        SeriesItemBadgeView(title: "총 \(item.numberOfContent)화", backgroundColor: Color.gray33.opacity(0.7))
                    }
                }
                .padding(3.3)
            }
            .frame(width: itemWidth, height: itemWidth * 432 / 306)
            
            Text(item.title)
                .font(.custom(Font.medium.rawValue, size: 12))
                .foregroundColor(Color.grayee)
                .lineLimit(2)
                .frame(width: itemWidth, alignment: .leading)
            
            Text(item.publishedDaysOfWeek)
                .font(.custom(Font.medium.rawValue, size: 11))
                .foregroundColor(Color.gray77)
                .frame(width: itemWidth, alignment: .leading)
        }
    }
}

#Preview {
    SeriesListItemView(
        itemWidth: CGFloat(294 / 3),
        item: SeriesListItem(
            seriesId: 1,
            title: "제목, 관심사,프로필+방장, 참여인원(어딘가..)",
            coverImage: "https://test-cf.sodalive.net/profile/default-profile.png",
            publishedDaysOfWeek: "매주 수, 토요일",
            isComplete: true,
            creator: SeriesListItemCreator(
                creatorId: 1,
                nickname: "creator",
                profileImage: "https://test-cf.sodalive.net/profile/default-profile.png"
            ),
            numberOfContent: 10,
            isNew: true,
            isPopular: true
        )
    )
}