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

import SwiftUI

import Kingfisher

struct SeriesListBigItemView: View {
    
    let item: SeriesListItem
    let isVisibleCreator: Bool
    
    var body: some View {
        VStack(alignment: .leading, spacing: 8) {
            ZStack {
                KFImage(URL(string: item.coverImage))
                    .resizable()
                    .scaledToFill()
                    .frame(width: 116.7, height: 165, alignment: .center)
                    .cornerRadius(5)
                    .clipped()
                    .onTapGesture {
                        AppState.shared
                            .setAppStep(step: .seriesDetail(seriesId: item.seriesId))
                    }
                
                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: 116.7, height: 165, alignment: .center)
            
            Text(item.title)
                .font(.custom(Font.medium.rawValue, size: 12))
                .foregroundColor(Color.grayee)
                .lineLimit(2)
            
            if isVisibleCreator {
                HStack(spacing: 3) {
                    KFImage(URL(string: item.creator.profileImage))
                        .resizable()
                        .scaledToFill()
                        .frame(width: 16, height: 16, alignment: .center)
                        .clipShape(Circle())
                    
                    Text(item.creator.nickname)
                        .font(.custom(Font.medium.rawValue, size: 10))
                        .foregroundColor(Color.gray77)
                        .lineLimit(1)
                }
                .onTapGesture {
                    AppState.shared
                        .setAppStep(step: .creatorDetail(userId: item.creator.creatorId))
                }
            }
            
            Text(item.publishedDaysOfWeek)
                .font(.custom(Font.medium.rawValue, size: 11))
                .foregroundColor(Color.gray77)
        }
        .frame(width: 116.7)
    }
}

#Preview {
    SeriesListBigItemView(
        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
        ),
        isVisibleCreator: true
    )
}