//
//  ContentMainTabRankContentView.swift
//  SodaLive
//
//  Created by klaus on 2/20/25.
//

import SwiftUI

import Kingfisher

struct ContentMainTabRankContentView: View {
    
    @AppStorage("token") private var token: String = UserDefaults.string(forKey: UserDefaultsKey.token)
    
    let rows = [
        GridItem(.fixed(60), alignment: .leading),
        GridItem(.fixed(60), alignment: .leading),
        GridItem(.fixed(60), alignment: .leading)
    ]
    
    let title: String
    
    let isMore: Bool
    let onClickMore: () -> Void
    
    let sortList: [String]
    let onClickSort: (String) -> Void
    
    let contentList: [GetAudioContentRankingItem]
    
    @State private var selectedSort = ""
    
    var body: some View {
        VStack(spacing: 13.3) {
            HStack(spacing: 0) {
                Text(title)
                    .font(.custom(Font.bold.rawValue, size: 18.3))
                    .foregroundColor(Color(hex: "eeeeee"))
                
                Spacer()
                
                if isMore {
                    Image("ic_forward")
                        .onTapGesture { onClickMore() }
                }
            }
            .padding(.horizontal, 13.3)
            
            if !sortList.isEmpty {
                ContentMainRankingSortView(
                    sorts: sortList,
                    selectSort: {
                        selectedSort = $0
                        onClickSort($0)
                    },
                    selectedSort: $selectedSort
                )
            }
            
            ScrollView(.horizontal, showsIndicators: false) {
                LazyHGrid(rows: rows, spacing: 13.3) {
                    ForEach(0..<contentList.count, id: \.self) { index in
                        let content = contentList[index]
                        HStack(spacing: 0) {
                            KFImage(URL(string: content.coverImageUrl))
                                .cancelOnDisappear(true)
                                .downsampling(
                                    size: CGSize(
                                        width: 60,
                                        height: 60
                                    )
                                )
                                .resizable()
                                .frame(width: 60, height: 60)
                                .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(content.title)
                                    .lineLimit(2)
                                    .font(.custom(Font.medium.rawValue, size: 13.3))
                                    .foregroundColor(.grayd2)
                                
                                Text(content.creatorNickname)
                                    .font(.custom(Font.medium.rawValue, size: 11))
                                    .foregroundColor(.gray77)
                            }
                        }
                        .frame(width: screenSize().width * 0.66, alignment: .leading)
                        .contentShape(Rectangle())
                        .onTapGesture {
                            if !token.trimmingCharacters(in: .whitespacesAndNewlines).isEmpty {
                                AppState.shared
                                    .setAppStep(step: .contentDetail(contentId: content.contentId))
                            } else {
                                AppState.shared
                                    .setAppStep(step: .login)
                            }
                        }
                    }
                }
                .padding(.horizontal, 13.3)
                .frame(height: 207)
            }
        }
        .onAppear {
            if !sortList.isEmpty {
                selectedSort = sortList[0]
            }
        }
    }
}

#Preview {
    ContentMainTabRankContentView(
        title: "인기 단편",
        isMore: true,
        onClickMore: {},
        sortList: ["매출", "댓글", "좋아요"],
        onClickSort: { _ in },
        contentList: [
            GetAudioContentRankingItem(
                contentId: 1,
                title: "안녕하세요 오늘은 커버곡을 들려드릴께요....안녕하세요 오늘은 커버곡을 들려드릴께요....",
                coverImageUrl: "https://test-cf.sodalive.net/profile/default-profile.png",
                themeStr: "커버곡",
                price: 100,
                duration: "00:30:20",
                creatorId: 1,
                creatorNickname: "유저1",
                creatorProfileImageUrl: "https://test-cf.sodalive.net/profile/default-profile.png"
            ),
            GetAudioContentRankingItem(
                contentId: 2,
                title: "안녕하세요 오늘은 커버곡을 들려드릴께요....",
                coverImageUrl: "https://test-cf.sodalive.net/profile/default-profile.png",
                themeStr: "커버곡",
                price: 0,
                duration: "00:30:20",
                creatorId: 2,
                creatorNickname: "유저2",
                creatorProfileImageUrl: "https://test-cf.sodalive.net/profile/default-profile.png"
            ),
            GetAudioContentRankingItem(
                contentId: 3,
                title: "안녕하세요 오늘은 커버곡을 들려드릴께요....안녕하세요 오늘은 커버곡을 들려드릴께요....",
                coverImageUrl: "https://test-cf.sodalive.net/profile/default-profile.png",
                themeStr: "커버곡",
                price: 50,
                duration: "00:30:20",
                creatorId: 3,
                creatorNickname: "유저3",
                creatorProfileImageUrl: "https://test-cf.sodalive.net/profile/default-profile.png"
            )
        ]
    )
}
