//
//  UserProfileDonationView.swift
//  SodaLive
//
//  Created by klaus on 2023/08/11.
//

import SwiftUI
import Kingfisher

struct UserProfileDonationView: View {
    
    let userId: Int
    let donationRankingResponse: [UserDonationRankingResponse]
    let rankingCrawns = ["ic_crown_1", "ic_crown_2", "ic_crown_3"]
    let rankingColors = [
        [Color(hex: "ffdc00"), Color(hex: "ffb600")],
        [Color(hex: "ffffff"), Color(hex: "9f9f9f")],
        [Color(hex: "e6a77a"), Color(hex: "c67e4a")],
        [Color(hex: "ffffff").opacity(0), Color(hex: "ffffff").opacity(0)]
    ]
    
    var body: some View {
        VStack(alignment: .leading, spacing: 0) {
            HStack(spacing: 0) {
                Text("후원랭킹")
                    .font(.custom(Font.bold.rawValue, size: 16.7))
                    .foregroundColor(Color.grayee)
                
                Spacer()
                
                Text("전체보기")
                    .font(.custom(Font.light.rawValue, size: 11.3))
                    .foregroundColor(Color.graybb)
                    .onTapGesture {
                        AppState.shared.setAppStep(step: .userProfileDonationAll(userId: userId))
                    }
            }
            
            ScrollView(.horizontal, showsIndicators: false) {
                HStack(spacing: 13.3) {
                    ForEach(0..<donationRankingResponse.count, id: \.self) { index in
                        let item = donationRankingResponse[index]
                        VStack(spacing: 6.7) {
                            ZStack {
                                KFImage(URL(string: item.profileImage))
                                    .resizable()
                                    .scaledToFill()
                                    .frame(width: 60, height: 60, alignment: .top)
                                    .clipShape(Circle())
                                    .overlay(
                                        Circle()
                                            .stroke(
                                                AngularGradient(colors: rankingColors[index < 4 ? index : 3], center: .center),
                                                lineWidth: 3
                                            )
                                    )
                                
                                if index < 3 {
                                    VStack(alignment: .trailing, spacing: 0) {
                                        Spacer()
                                        
                                        Image(rankingCrawns[index])
                                            .resizable()
                                            .frame(width: 25, height: 25)
                                    }
                                    .frame(width: 63, height: 63, alignment: .trailing)
                                }
                            }
                            .frame(width: 63, height: 63)
                            
                            Text(item.nickname)
                                .font(.custom(Font.medium.rawValue, size: 12))
                                .foregroundColor(.grayee)
                                .frame(width: 63)
                                .lineLimit(1)
                        }
                    }
                }
            }
            .padding(.top, 26.7)
        }
    }
}