//
//  SectionRecommendChannelView.swift
//  SodaLive
//
//  Created by klaus on 2023/08/09.
//

import SwiftUI
import Kingfisher

struct SectionRecommendChannelView: View {
    
    let items: [GetRecommendChannelResponse]
    
    @AppStorage("token") private var token: String = UserDefaults.string(forKey: UserDefaultsKey.token)
    
    var body: some View {
        VStack(spacing: 16) {
            HStack(spacing: 0) {
                Text("팔로잉 ")
                    .font(.custom(Font.preBold.rawValue, size: 24))
                    .foregroundColor(.button)
                
                Text("채널")
                    .font(.custom(Font.preBold.rawValue, size: 24))
                    .foregroundColor(.white)
                
                Spacer()
            }
            .frame(maxWidth: .infinity, alignment: .leading)
            .padding(.horizontal, 24)
            
            ScrollView(.horizontal, showsIndicators: false) {
                HStack(spacing: 16) {
                    ForEach(0..<items.count, id: \.self) { index in
                        let item = items[index]
                        
                        VStack(spacing: 13.3) {
                            ZStack(alignment: .bottom) {
                                KFImage(URL(string: item.profileImageUrl))
                                    .cancelOnDisappear(true)
                                    .downsampling(
                                        size: CGSize(
                                            width: screenSize().width * 0.18,
                                            height: screenSize().width * 0.18
                                        )
                                    )
                                    .resizable()
                                    .scaledToFill()
                                    .frame(width: screenSize().width * 0.18, height: screenSize().width * 0.18, alignment: .center)
                                    .cornerRadius(screenSize().width * 0.09)
                                    .overlay(
                                        Circle()
                                            .strokeBorder(lineWidth: 3)
                                            .foregroundColor(
                                                .button
                                                    .opacity(item.isOnAir ? 1 : 0)
                                            )
                                    )
                                
                                if item.isOnAir {
                                    Text("Live")
                                        .font(.custom(Font.bold.rawValue, size: 8.7))
                                        .foregroundColor(.white)
                                        .padding(.vertical, 2.7)
                                        .padding(.horizontal, 5.7)
                                        .background(Color.button)
                                        .cornerRadius(6.7)
                                }
                            }
                            
                            Text(item.nickname)
                                .font(.custom(Font.medium.rawValue, size: 14))
                                .foregroundColor(Color.graybb)
                                .frame(width: screenSize().width * 0.18)
                                .lineLimit(1)
                        }
                        .onTapGesture {
                            if !token.trimmingCharacters(in: .whitespacesAndNewlines).isEmpty {
                                AppState.shared.setAppStep(
                                    step: .creatorDetail(userId: item.creatorId)
                                )
                            } else {
                                AppState.shared.setAppStep(step: .login)
                            }
                        }
                    }
                    
                    VStack(spacing: 10.7) {
                        Image("btn_item_more")
                            .resizable()
                            .frame(width: screenSize().width * 0.18, height: screenSize().width * 0.18, alignment: .center)
                        
                        Text("더보기")
                            .font(.custom(Font.preRegular.rawValue, size: 14))
                            .foregroundColor(.white)
                            .frame(width: screenSize().width * 0.18)
                            .lineLimit(1)
                    }
                    .onTapGesture {
                        if !token.trimmingCharacters(in: .whitespacesAndNewlines).isEmpty {
                            AppState.shared.setAppStep(step: .followingList)
                        } else {
                            AppState.shared.setAppStep(step: .login)
                        }
                    }
                }
                .padding(.horizontal, 24)
            }
        }
    }
}

struct SectionRecommendChannelView_Previews: PreviewProvider {
    static var previews: some View {
        SectionRecommendChannelView(
            items: [
                GetRecommendChannelResponse(creatorId: 1, nickname: "크리에이터1", profileImageUrl: "https://test-cf.sodalive.net/profile/default-profile.png", isOnAir: true),
                GetRecommendChannelResponse(creatorId: 2, nickname: "크리에이터2", profileImageUrl: "https://test-cf.sodalive.net/profile/default-profile.png", isOnAir: false),
                GetRecommendChannelResponse(creatorId: 3, nickname: "크리에이터3", profileImageUrl: "https://test-cf.sodalive.net/profile/default-profile.png", isOnAir: false)
            ]
        )
    }
}