//
//  ContentMainSeriesRankingView.swift
//  SodaLive
//
//  Created by klaus on 2/21/25.
//

import SwiftUI
import Kingfisher

struct ContentMainSeriesRankingView: View {
    
    let seriesList: [SeriesListItem]
    
    let rows = [
        GridItem(.flexible(), alignment: .leading),
        GridItem(.flexible(), alignment: .leading),
        GridItem(.flexible(), alignment: .leading)
    ]
    
    var body: some View {
        VStack(alignment: .leading, spacing: 13.3) {
            Text("일간 랭킹")
                .font(.custom(Font.bold.rawValue, size: 18.3))
                .foregroundColor(.grayee)
                .padding(.horizontal, 13.3)
            
            ScrollView(.horizontal, showsIndicators: false) {
                LazyHGrid(rows: rows, spacing: 13.3) {
                    ForEach(0..<seriesList.count, id: \.self) { index in
                        let series = seriesList[index]
                        HStack(spacing: 0) {
                            KFImage(URL(string: series.coverImage))
                                .cancelOnDisappear(true)
                                .downsampling(
                                    size: CGSize(
                                        width: 60,
                                        height: 85
                                    )
                                )
                                .resizable()
                                .frame(width: 60, height: 85)
                                .cornerRadius(2.7)
                            
                            Text("\(index + 1)")
                                .font(.custom(Font.bold.rawValue, size: 16.7))
                                .foregroundColor(.button)
                                .padding(.horizontal, 12)
                            
                            VStack(alignment: .leading, spacing: 8) {
                                Text(series.title)
                                    .lineLimit(2)
                                    .font(.custom(Font.medium.rawValue, size: 13.3))
                                    .foregroundColor(.grayd2)
                                
                                Text(series.creator.nickname)
                                    .font(.custom(Font.medium.rawValue, size: 11))
                                    .foregroundColor(.gray77)
                            }
                        }
                        .frame(maxWidth: screenSize().width * 0.66, alignment: .leading)
                        .contentShape(Rectangle())
                        .onTapGesture {
                            AppState
                                .shared
                                .setAppStep(step: .seriesDetail(seriesId: series.seriesId))
                        }
                    }
                }
                .padding(.horizontal, 13.3)
            }
        }
    }
}

#Preview {
    ContentMainSeriesRankingView(
        seriesList: [
            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
            ),
            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
            ),
            SeriesListItem(
                seriesId: 3,
                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
            ),
            SeriesListItem(
                seriesId: 4,
                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
            )
        ]
    )
}