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

import SwiftUI
import Kingfisher

struct SectionRecommendChannelView: View {
    
    let items: [GetRecommendChannelResponse]
    
    @Binding var isFollowingList: Bool
    
    var body: some View {
        VStack(spacing: 21.3) {
            HStack(spacing: 0) {
                if isFollowingList {
                    Text("팔로잉 ")
                        .font(.custom(Font.bold.rawValue, size: 18.3))
                        .foregroundColor(Color(hex: "eeeeee"))
                } else {
                    Text("추천 ")
                        .font(.custom(Font.bold.rawValue, size: 18.3))
                        .foregroundColor(Color(hex: "eeeeee"))
                }
                
                Text("채널")
                    .font(.custom(Font.bold.rawValue, size: 18.3))
                    .foregroundColor(Color(hex: "9970ff"))
                
                Spacer()
                
                Text("팔로잉 채널")
                    .font(.custom(Font.medium.rawValue, size: 13.3))
                    .foregroundColor(Color(hex: "777777"))
                
                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))
                                    .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(
                                                Color(hex: "9970ff")
                                                    .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(hex: "9970ff"))
                                        .cornerRadius(6.7)
                                }
                            }
                            
                            Text(item.nickname)
                                .font(.custom(Font.medium.rawValue, size: 11.3))
                                .foregroundColor(Color(hex: "bbbbbb"))
                                .frame(width: screenSize().width * 0.18)
                                .lineLimit(1)
                        }
                        .onTapGesture {
                            AppState.shared.setAppStep(
                                step: .creatorDetail(userId: item.creatorId)
                            )
                        }
                    }
                    
                    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 {
                            AppState.shared.setAppStep(step: .followingList)
                        }
                    }
                }
            }
        }
    }
}

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)
        )
    }
}