//
//  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 {
        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]
                            HStack(spacing: 0) {
                                KFImage(URL(string: item.coverImageUrl))
                                    .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())
                            .onTapGesture {
                                AppState
                                    .shared
                                    .setAppStep(step: .contentDetail(contentId: item.contentId))
                            }
                            .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()
    }
}