sodalive-ios/SodaLive/Sources/Chat/Character/Banner/AutoSlideCharacterBannerView.swift

//
//  AutoSlideCharacterBannerView.swift
//  SodaLive
//
//  Created by klaus on 8/29/25.
//

import SwiftUI
import Kingfisher

struct AutoSlideCharacterBannerView: View {
    var items: [CharacterBannerResponse] = []
    var onTap: (CharacterBannerResponse) -> Void = { _ in }
    
    @State private var currentIndex: Int = 0
    @State private var height: CGFloat = 0
    private let timer = Timer.publish(every: 4, on: .main, in: .common).autoconnect()
    
    var body: some View {
        VStack(spacing: 8) {
            TabView(selection: $currentIndex) {
                ForEach(0..<items.count, id: \.self) { index in
                    let item = items[index]
                    AutoSlideCharacterBannerPage(
                        item: item,
                        width: screenSize().width,
                        height: height,
                        onTap: onTap
                    )
                    .tag(index)
                }
            }
            .tabViewStyle(.page(indexDisplayMode: .never))
            .frame(maxWidth: .infinity)
            .frame(height: height)
            .onAppear {
                self.height = screenSize().width * 0.53
            }
            .onDisappear {
                timer.upstream.connect().cancel()
            }
            .onReceive(timer) { _ in
                guard !items.isEmpty else { return }
                withAnimation { currentIndex = (currentIndex + 1) % items.count }
            }
            
            HStack(spacing: 4) {
                ForEach(0..<items.count, id: \.self) { index in
                    Capsule()
                        .foregroundColor(
                            index == currentIndex
                            ? .button
                            : .gray90
                        )
                        .frame(
                            width: index == currentIndex ? 18 : 6,
                            height: 6
                        )
                        .tag(index)
                }
            }
        }
    }
}

#Preview {
    AutoSlideCharacterBannerView(
        items: [
            CharacterBannerResponse(characterId: 1, imageUrl: "https://picsum.photos/1000/300")
        ]
    )
    .padding()
    .background(Color.black)
}


private struct AutoSlideCharacterBannerPage: View {
    let item: CharacterBannerResponse
    let width: CGFloat
    let height: CGFloat
    let onTap: (CharacterBannerResponse) -> Void
    @State private var boundURL: URL?
    
    var body: some View {
        Group {
            if let boundURL {
                KFImage(boundURL)
                    .placeholder { Color.gray.opacity(0.2) }
                    .retry(maxCount: 2, interval: .seconds(1))
                    .cancelOnDisappear(true)
                    .downsampling(size: CGSize(width: width, height: height))
                    .resizable()
                    .scaledToFill()
                    .frame(width: width, height: height)
                    .clipped()
                    .cornerRadius(12)
            } else {
                Color.clear
                    .frame(width: width, height: height)
                    .cornerRadius(12)
            }
        }
        .contentShape(Rectangle())
        .onTapGesture { onTap(item) }
        .onAppear {
            let encoded = item.imageUrl.addingPercentEncoding(
                withAllowedCharacters: .urlQueryAllowed
            ) ?? item.imageUrl
            boundURL = URL(string: encoded)
        }
        .onDisappear {
            boundURL = nil
        }
    }
}