//
//  ContentMainRankingView.swift
//  SodaLive
//
//  Created by klaus on 2023/10/15.
//

import SwiftUI
import Kingfisher

struct ContentMainRankingView: View {
    
    @StateObject private var viewModel = ContentMainRankingViewModel()
    
    let rows = [
        GridItem(.fixed(60), alignment: .leading),
        GridItem(.fixed(60), alignment: .leading),
        GridItem(.fixed(60), alignment: .leading)
    ]
    
    var body: some View {
        LazyVStack(spacing: 16.7) {
            HStack(spacing: 0) {
                Text("인기 콘텐츠")
                    .font(.custom(Font.bold.rawValue, size: 18.3))
                    .foregroundColor(Color(hex: "eeeeee"))
                
                Spacer()
                
                Image("ic_forward")
                    .onTapGesture {
                        AppState.shared.setAppStep(step: .contentRankingAll)
                    }
            }
            
            VStack(spacing: 8) {
                Text("\(viewModel.dateString)")
                    .font(.custom(Font.bold.rawValue, size: 14.7))
                    .foregroundColor(Color(hex: "eeeeee"))
                
                Text("※ 인기 콘텐츠의 순위는 매주 업데이트됩니다.")
                    .font(.custom(Font.light.rawValue, size: 13.3))
                    .foregroundColor(Color(hex: "bbbbbb"))
            }
            .padding(.vertical, 8)
            .frame(width: screenSize().width - 26.7)
            .background(Color(hex: "222222"))
            
            if !viewModel.contentRankingSortList.isEmpty {
                ContentMainRankingSortView(
                    sorts: viewModel.contentRankingSortList,
                    selectSort: { viewModel.selectedContentRankingSort = $0 },
                    selectedSort: $viewModel.selectedContentRankingSort
                )
            }
            
            ScrollView(.horizontal, showsIndicators: false) {
                LazyHGrid(rows: rows, spacing: 13.3) {
                    ForEach(0..<viewModel.contentRankingItemList.count, id: \.self) { index in
                        let content = viewModel.contentRankingItemList[index]
                        HStack(spacing: 0) {
                            KFImage(URL(string: content.coverImageUrl))
                                .resizable()
                                .frame(width: 60, height: 60)
                                .cornerRadius(2.7)
                            
                            Text("\(index + 1)")
                                .font(.custom(Font.bold.rawValue, size: 16.7))
                                .foregroundColor(Color(hex: "3bb9f1"))
                                .padding(.horizontal, 12)
                            
                            VStack(alignment: .leading, spacing: 8) {
                                Text(content.title)
                                    .lineLimit(2)
                                    .font(.custom(Font.medium.rawValue, size: 13.3))
                                    .foregroundColor(Color(hex: "d2d2d2"))
                                
                                Text(content.creatorNickname)
                                    .font(.custom(Font.medium.rawValue, size: 11))
                                    .foregroundColor(Color(hex: "777777"))
                            }
                        }
                        .frame(maxWidth: screenSize().width * 0.66, alignment: .leading)
                        .contentShape(Rectangle())
                        .onTapGesture {
                            AppState
                                .shared
                                .setAppStep(step: .contentDetail(contentId: content.contentId))
                        }
                    }
                }
                .frame(height: 207)
            }
        }
        .frame(maxWidth: .infinity)
        .onAppear {
            viewModel.getContentRankingSortType()
            viewModel.getContentRanking()
        }
    }
}

struct ContentMainRankingView_Previews: PreviewProvider {
    static var previews: some View {
        ContentMainRankingView()
    }
}