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

import SwiftUI
import Kingfisher

struct SectionRecommendChannelView: View {
    
    let items: [GetRecommendChannelResponse]
    
    @Binding var isFollowingList: Bool
    @AppStorage("token") private var token: String = UserDefaults.string(forKey: UserDefaultsKey.token)
    
    var body: some View {
        VStack(spacing: 21.3) {
            HStack(spacing: 0) {
                if isFollowingList {
                    Text("팔로잉 ")
                        .font(.custom(Font.bold.rawValue, size: 18.3))
                        .foregroundColor(.grayee)
                } else {
                    Text("추천 ")
                        .font(.custom(Font.bold.rawValue, size: 18.3))
                        .foregroundColor(.grayee)
                }
                
                Text("채널")
                    .font(.custom(Font.bold.rawValue, size: 18.3))
                    .foregroundColor(.button)
                
                Spacer()
                
                if !token.trimmingCharacters(in: .whitespacesAndNewlines).isEmpty {
                    Text("팔로잉 채널")
                        .font(.custom(Font.medium.rawValue, size: 13.3))
                        .foregroundColor(.gray77)
                    
                    Image(isFollowingList ? "btn_toggle_on_big" : "btn_toggle_off_big")
                        .resizable()
                        .frame(width: 33.3, height: 20)
                        .padding(.leading, 6.7)
                        .onTapGesture {
                            isFollowingList.toggle()
                        }
                }
            }
            .frame(width: screenSize().width - 26.7, alignment: .leading)
            
            ScrollView(.horizontal, showsIndicators: false) {
                HStack(spacing: 21.3) {
                    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: 11.3))
                                .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)
                            }
                        }
                    }
                    
                    if isFollowingList {
                        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.medium.rawValue, size: 11.3))
                                .foregroundColor(Color(hex: "bbbbbb"))
                                .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, 13.3)
            }
        }
    }
}

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)
            ],
            isFollowingList: .constant(true)
        )
    }
}