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

import SwiftUI
import Kingfisher

struct SectionRecommendLiveView: View {
    
    let items: [GetRecommendLiveResponse]
    @State private var currentIndex = 0
    @State private var timer = Timer.publish(every: 3, on: .main, in: .common).autoconnect()
    @AppStorage("token") private var token: String = UserDefaults.string(forKey: UserDefaultsKey.token)
    
    var body: some View {
        VStack(spacing: 0) {
            HStack(spacing: 0) {
                Text("추천 ")
                    .font(.custom(Font.bold.rawValue, size: 18.3))
                    .foregroundColor(Color(hex: "ff5c49"))
                
                Text("라이브")
                    .font(.custom(Font.bold.rawValue, size: 18.3))
                    .foregroundColor(.grayee)
                
                Spacer()
                
                if !token.trimmingCharacters(in: .whitespacesAndNewlines).isEmpty {
                    Image("ic_message")
                        .onTapGesture {
                            AppState.shared.setAppStep(step: .message)
                        }
                }
            }
            .frame(width: screenSize().width - 26.7, alignment: .leading)
            
            TabView(selection: $currentIndex) {
                ForEach(0..<items.count, id: \.self) { index in
                    let item = items[index]
                    if let url = item.imageUrl.addingPercentEncoding(withAllowedCharacters: .urlQueryAllowed) {
                        KFImage(URL(string: url))
                            .cancelOnDisappear(true)
                            .downsampling(
                                size: CGSize(
                                    width: screenSize().width - 26.7,
                                    height: (screenSize().width - 26.7) * 0.53
                                )
                            )
                            .resizable()
                            .scaledToFill()
                            .frame(
                                width: screenSize().width - 26.7,
                                height: (screenSize().width - 26.7) * 0.53
                            )
                            .onTapGesture {
                                if !token.trimmingCharacters(in: .whitespacesAndNewlines).isEmpty {
                                    AppState.shared.setAppStep(step: .creatorDetail(userId: item.creatorId))
                                } else {
                                    AppState.shared.setAppStep(step: .login)
                                }
                            }
                            .cornerRadius(4.7)
                    } else {
                        KFImage(URL(string: item.imageUrl))
                            .cancelOnDisappear(true)
                            .downsampling(
                                size: CGSize(
                                    width: screenSize().width - 26.7,
                                    height: (screenSize().width - 26.7) * 0.53
                                )
                            )
                            .resizable()
                            .scaledToFill()
                            .frame(
                                width: screenSize().width - 26.7,
                                height: (screenSize().width - 26.7) * 0.53
                            )
                            .onTapGesture {
                                if !token.trimmingCharacters(in: .whitespacesAndNewlines).isEmpty {
                                    AppState.shared.setAppStep(step: .creatorDetail(userId: item.creatorId))
                                } else {
                                    AppState.shared.setAppStep(step: .login)
                                }
                            }
                            .cornerRadius(4.7)
                    }
                }
            }
            .tabViewStyle(PageTabViewStyle(indexDisplayMode: .never))
            .frame(
                width: screenSize().width - 26.7,
                height: (screenSize().width - 26.7) * 0.53
            )
            .padding(.top, 26.7)
            
            HStack(spacing: 4) {
                ForEach(0..<items.count, id: \.self) { index in
                    Capsule()
                        .foregroundColor(index == currentIndex ? Color.button : Color.gray90)
                        .frame(
                            width: index == currentIndex ? 18 : 6,
                            height: 6
                        )
                        .tag(index)
                }
            }
            .padding(.top, 13.3)
        }
        .frame(width: screenSize().width - 26.7)
        .onAppear {
            timer = Timer.publish(every: 3, on: .main, in: .common).autoconnect()
        }
        .onDisappear {
            timer.upstream.connect().cancel()
        }
        .onReceive(timer) { _ in
            DispatchQueue.main.async {
                withAnimation {
                    if currentIndex == items.count - 1 {
                        currentIndex = 0
                    } else {
                        currentIndex += 1
                    }
                }
            }
        }
    }
}

struct SectionRecommendLiveView_Previews: PreviewProvider {
    static var previews: some View {
        SectionRecommendLiveView(
            items: [
                GetRecommendLiveResponse(
                    imageUrl: "https://test-cf.sodalive.net/profile/default-profile.png",
                    creatorId: 1
                ),
                GetRecommendLiveResponse(
                    imageUrl: "https://test-cf.sodalive.net/profile/default-profile.png",
                    creatorId: 2
                )
            ]
        )
    }
}