//
//  ContentRankingAllView.swift
//  SodaLive
//
//  Created by klaus on 2023/10/15.
//

import SwiftUI
import Kingfisher

struct ContentRankingAllView: View {
    
    @StateObject var viewModel = ContentRankingAllViewModel()
    
    var body: some View {
        NavigationView {
            BaseView(isLoading: $viewModel.isLoading) {
                VStack(spacing: 0) {
                    DetailNavigationBar(title: "인기 콘텐츠")
                    
                    VStack(spacing: 8) {
                        Text("\(viewModel.dateString)")
                            .font(.custom(Font.bold.rawValue, size: 14.7))
                            .foregroundColor(Color(hex: "eeeeee"))
                        
                        Text("※ 인기 콘텐츠의 순위는 매주 업데이트됩니다.")
                            .font(.custom(Font.light.rawValue, size: 13.3))
                            .foregroundColor(Color(hex: "bbbbbb"))
                    }
                    .padding(.vertical, 8)
                    .frame(width: screenSize().width - 26.7)
                    .background(Color(hex: "222222"))
                    .padding(.top, 13.3)
                    
                    ContentMainRankingSortView(
                        sorts: viewModel.contentRankingSortList,
                        selectSort: { viewModel.selectedContentRankingSort = $0 },
                        selectedSort: $viewModel.selectedContentRankingSort
                    )
                    .frame(width: screenSize().width - 26.7)
                    .padding(.vertical, 16.7)
                    
                    ScrollView(.vertical, showsIndicators: false) {
                        LazyVStack(spacing: 20) {
                            ForEach(0..<viewModel.contentRankingItemList.count, id: \.self) { index in
                                let item = viewModel.contentRankingItemList[index]
                                NavigationLink {
                                    ContentDetailView(contentId: item.contentId)
                                } label: {
                                    HStack(spacing: 0) {
                                        KFImage(URL(string: item.coverImageUrl))
                                            .cancelOnDisappear(true)
                                            .downsampling(
                                                size: CGSize(
                                                    width: 66.7,
                                                    height: 66.7
                                                )
                                            )
                                            .resizable()
                                            .scaledToFill()
                                            .frame(width: 66.7, height: 66.7, alignment: .top)
                                            .clipped()
                                            .cornerRadius(5.3)
                                        
                                        Text("\(index + 1)")
                                            .font(.custom(Font.bold.rawValue, size: 16.7))
                                            .foregroundColor(Color(hex: "3bb9f1"))
                                            .padding(.horizontal, 12)
                                        
                                        VStack(alignment: .leading, spacing: 0) {
                                            HStack(spacing: 8) {
                                                Text(item.themeStr)
                                                    .font(.custom(Font.medium.rawValue, size: 8))
                                                    .foregroundColor(Color(hex: "3bac6a"))
                                                    .padding(2.6)
                                                    .background(Color(hex: "28312b"))
                                                    .cornerRadius(2.6)
                                                
                                                Text(item.duration)
                                                    .font(.custom(Font.medium.rawValue, size: 8))
                                                    .foregroundColor(Color(hex: "777777"))
                                                    .padding(2.6)
                                                    .background(Color(hex: "222222"))
                                                    .cornerRadius(2.6)
                                            }
                                            
                                            Text(item.creatorNickname)
                                                .font(.custom(Font.medium.rawValue, size: 10.7))
                                                .foregroundColor(Color(hex: "777777"))
                                                .padding(.vertical, 8)
                                            
                                            Text(item.title)
                                                .font(.custom(Font.medium.rawValue, size: 12))
                                                .foregroundColor(Color(hex: "d2d2d2"))
                                                .lineLimit(2)
                                                .padding(.top, 2.7)
                                        }
                                        
                                        Spacer()
                                        
                                        if item.price > 0 {
                                            HStack(spacing: 8) {
                                                Image("ic_can")
                                                    .resizable()
                                                    .frame(width: 17, height: 17)
                                                
                                                Text("\(item.price)")
                                                    .font(.custom(Font.medium.rawValue, size: 12))
                                                    .foregroundColor(Color(hex: "909090"))
                                            }
                                        } else {
                                            Text("무료")
                                                .font(.custom(Font.medium.rawValue, size: 12))
                                                .foregroundColor(Color(hex: "ffffff"))
                                                .padding(.horizontal, 5.3)
                                                .padding(.vertical, 2.7)
                                                .background(Color(hex: "cf5c37"))
                                                .cornerRadius(2.6)
                                        }
                                    }
                                    .frame(height: 66.7)
                                    .contentShape(Rectangle())
                                    .onAppear {
                                        if index == viewModel.contentRankingItemList.count - 1 {
                                            viewModel.getContentRanking()
                                        }
                                    }
                                }
                            }
                        }
                    }
                    .padding(13.3)
                }
                
                if viewModel.isLoading {
                    LoadingView()
                }
            }
            .popup(isPresented: $viewModel.isShowPopup, type: .toast, position: .top, autohideIn: 2) {
                GeometryReader { geo in
                    HStack {
                        Spacer()
                        Text(viewModel.errorMessage)
                            .padding(.vertical, 13.3)
                            .padding(.horizontal, 6.7)
                            .frame(width: geo.size.width - 66.7, alignment: .center)
                            .font(.custom(Font.medium.rawValue, size: 12))
                            .background(Color(hex: "9970ff"))
                            .foregroundColor(Color.white)
                            .multilineTextAlignment(.leading)
                            .fixedSize(horizontal: false, vertical: true)
                            .cornerRadius(20)
                            .padding(.top, 66.7)
                        Spacer()
                    }
                }
            }
            .onAppear {
                viewModel.getContentRankingSortType()
                viewModel.getContentRanking()
            }
        }
    }
}

struct ContentRankingAllView_Previews: PreviewProvider {
    static var previews: some View {
        ContentRankingAllView()
    }
}
