//
//  LiveNowAllView.swift
//  SodaLive
//
//  Created by klaus on 2023/08/14.
//

import SwiftUI
import RefreshableScrollView

struct LiveNowAllView: View {
    
    @StateObject var viewModel = LiveViewModel()
    @StateObject var liveAllViewModel = LiveAllViewModel()
    
    let columns = [
        GridItem(.flexible(), alignment: .top),
        GridItem(.flexible(), alignment: .top),
        GridItem(.flexible(), alignment: .top)
    ]
    
    let spacing: CGFloat = 13.3
    
    let onClickParticipant: (Int) -> Void
    
    var body: some View {
        BaseView(isLoading: $viewModel.isLoading) {
            GeometryReader { proxy in
                VStack(spacing: 0) {
                    DetailNavigationBar(title: "지금 라이브 중 전체보기")
                    
                    RefreshableScrollView(
                        refreshing: $viewModel.isRefresh,
                        action: {
                            viewModel.page = 1
                            viewModel.isLast = false
                            viewModel.getLiveNowList()
                        },
                        content: {
                            LazyVGrid(columns: columns, spacing: spacing) {
                                ForEach(0..<viewModel.liveNowItems.count, id: \.self) { index in
                                    let item = viewModel.liveNowItems[index]
                                    
                                    LiveNowAllItemView(item: item, itemWidth: (screenSize().width - (spacing * (CGFloat(columns.count + 1)))) / 3)
                                        .contentShape(Rectangle())
                                        .onTapGesture {
                                            self.liveAllViewModel.selectedRoomId = item.roomId
                                            withAnimation {
                                                self.liveAllViewModel.isShowLiveDetail = true
                                            }
                                        }
                                        .onAppear {
                                            if index == viewModel.liveNowItems.count - 1 {
                                                viewModel.getLiveNowList()
                                            }
                                        }
                                }
                            }
                        }
                    )
                    
                    if proxy.safeAreaInsets.bottom > 0 {
                        Rectangle()
                            .foregroundColor(Color.black.opacity(0))
                            .frame(width: screenSize().width, height: 15.3)
                    }
                }
                .edgesIgnoringSafeArea(.bottom)
            }
            
            if liveAllViewModel.isShowLiveDetail {
                LiveDetailView(
                    roomId: liveAllViewModel.selectedRoomId,
                    onClickParticipant: {
                        AppState.shared.isShowPlayer = false
                        onClickParticipant(liveAllViewModel.selectedRoomId)
                    },
                    onClickReservation: {},
                    onClickStart: {},
                    onClickCancel: {},
                    onClickClose: {
                        withAnimation {
                            liveAllViewModel.isShowLiveDetail = false
                        }
                    }
                )
            }
        }
        .onAppear {
            viewModel.getLiveNowList()
        }
    }
}
