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

import SwiftUI
import Kingfisher

struct ContentMainRankingView: View {
    
    let sorts: [String]
    let item: GetAudioContentRanking
    
    let selectSort: (String) -> Void
    @Binding var selectedSort: String
    
    let rows = [
        GridItem(.fixed(60), alignment: .leading),
        GridItem(.fixed(60), alignment: .leading),
        GridItem(.fixed(60), alignment: .leading)
    ]
    
    var body: some View {
        VStack(spacing: 0) {
            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("\(item.startDate) ~ \(item.endDate)")
                    .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"))
            .padding(.top, 13.3)
            
            ContentMainRankingSortView(sorts: sorts, selectSort: selectSort, selectedSort: $selectedSort)
                .padding(.vertical, 16.7)
            
            ScrollView(.horizontal, showsIndicators: false) {
                LazyHGrid(rows: rows, spacing: 13.3) {
                    ForEach(0..<item.items.count, id: \.self) { index in
                        let content = item.items[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)
            }
            .padding(.top, 13.3)
        }
    }
}

struct ContentMainRankingView_Previews: PreviewProvider {
    static var previews: some View {
        ContentMainRankingView(
            sorts: ["매출", "후원", "댓글"],
            item: GetAudioContentRanking(
                startDate: "2023년 10월 2일",
                endDate: "10월 9일",
                items: [
                    GetAudioContentRankingItem(
                        contentId: 10,
                        title: "sdffsfddfs",
                        coverImageUrl: "https://test-cf.sodalive.net/audio_content_cover/27/27-cover-77e3a23f-23f2-467c-867f-3e6b7e08060c-9136-1696424061456",
                        themeStr: "커버곡",
                        price: 10,
                        duration: "00:30:20",
                        creatorId: 1,
                        creatorNickname: "ㄹㄴ어ㅏㅣㅇㄴ런아ㅣ"
                    ),
                    GetAudioContentRankingItem(
                        contentId: 10,
                        title: "sdffsfddfs",
                        coverImageUrl: "https://test-cf.sodalive.net/audio_content_cover/27/27-cover-77e3a23f-23f2-467c-867f-3e6b7e08060c-9136-1696424061456",
                        themeStr: "커버곡",
                        price: 10,
                        duration: "00:30:20",
                        creatorId: 1,
                        creatorNickname: "ㄹㄴ어ㅏㅣㅇㄴ런아ㅣ"
                    ),
                    GetAudioContentRankingItem(
                        contentId: 10,
                        title: "sdffsfddfs",
                        coverImageUrl: "https://test-cf.sodalive.net/audio_content_cover/27/27-cover-77e3a23f-23f2-467c-867f-3e6b7e08060c-9136-1696424061456",
                        themeStr: "커버곡",
                        price: 10,
                        duration: "00:30:20",
                        creatorId: 1,
                        creatorNickname: "ㄹㄴ어ㅏㅣㅇㄴ런아ㅣ"
                    ),
                    GetAudioContentRankingItem(
                        contentId: 10,
                        title: "sdffsfddfs",
                        coverImageUrl: "https://test-cf.sodalive.net/audio_content_cover/27/27-cover-77e3a23f-23f2-467c-867f-3e6b7e08060c-9136-1696424061456",
                        themeStr: "커버곡",
                        price: 10,
                        duration: "00:30:20",
                        creatorId: 1,
                        creatorNickname: "ㄹㄴ어ㅏㅣㅇㄴ런아ㅣ"
                    ),
                ]
            ),
            selectSort: { _ in },
            selectedSort: .constant("매출")
        )
    }
}