//
//  SeriesDetailView.swift
//  SodaLive
//
//  Created by klaus on 4/29/24.
//

import SwiftUI
import Kingfisher

struct SeriesDetailView: View {
    
    @ObservedObject var viewModel = SeriesDetailViewModel()
    
    let seriesId: Int
    
    var body: some View {
        BaseView(isLoading: $viewModel.isLoading) {
            ZStack(alignment: .top) {
                Color.gray11.ignoresSafeArea()
                
                if let seriesDetail = viewModel.seriesDetail {
                    KFImage(URL(string: seriesDetail.coverImage))
                        .resizable()
                        .scaledToFit()
                        .frame(maxWidth: .infinity)
                        .blur(radius: 25)
                    
                    ScrollView(.vertical, showsIndicators: false) {
                        VStack(spacing: 0) {
                            HStack(spacing: 0) {
                                Image("ic_back")
                                    .resizable()
                                    .frame(width: 20, height: 20)
                                    .onTapGesture { AppState.shared.back() }
                                
                                Spacer()
                            }
                            .padding(.horizontal, 13.3)
                            .frame(height: 50)
                            
                            ZStack {
                                Rectangle()
                                    .frame(width: screenSize().width, height: 94)
                                    .foregroundColor(Color.gray11)
                                    .cornerRadius(21.3, corners: [.topLeft, .topRight])
                                    .padding(.top, 94)
                                
                                KFImage(URL(string: seriesDetail.coverImage))
                                    .resizable()
                                    .scaledToFit()
                                    .cornerRadius(5)
                                    .frame(width: 133.3, height: 188)
                                
                            }
                            
                            VStack(alignment: .leading, spacing: 0) {
                                Text(seriesDetail.title)
                                    .font(.custom(Font.bold.rawValue, size: 18.3))
                                    .foregroundColor(Color.grayee)
                                    .padding(.horizontal, 13.3)
                                    .padding(.top, 24)
                                
                                HStack(spacing: 5.3) {
                                    Text(seriesDetail.genre)
                                        .font(.custom(Font.medium.rawValue, size: 12))
                                        .foregroundColor(Color(hex: "3bac6a"))
                                        .padding(.horizontal, 5.3)
                                        .padding(.vertical, 3.3)
                                        .background(Color(hex: "28312b"))
                                        .cornerRadius(2.6)
                                    
                                    if seriesDetail.isAdult {
                                        Text("19세")
                                            .font(.custom(Font.medium.rawValue, size: 12))
                                            .foregroundColor(Color(hex: "f1291c"))
                                            .padding(.horizontal, 5.3)
                                            .padding(.vertical, 3.3)
                                            .background(Color(hex: "312827"))
                                            .cornerRadius(2.6)
                                    } else {
                                        Text("전체연령가")
                                            .font(.custom(Font.medium.rawValue, size: 12))
                                            .foregroundColor(Color(hex: "d2d2d2"))
                                            .padding(.horizontal, 5.3)
                                            .padding(.vertical, 3.3)
                                            .background(Color(hex: "222222"))
                                            .cornerRadius(2.6)
                                    }
                                    
                                    Text(seriesDetail.publishedDaysOfWeek)
                                        .font(.custom(Font.medium.rawValue, size: 12))
                                        .foregroundColor(Color(hex: "909090"))
                                }
                                .padding(.top, 8)
                                .padding(.horizontal, 13.3)
                                
                                ScrollView(.horizontal, showsIndicators: false) {
                                    HStack(spacing: 5.3) {
                                        ForEach(0..<seriesDetail.keywordList.count, id: \.self) {
                                            SeriesKeywordChipView(keyword: seriesDetail.keywordList[$0])
                                        }
                                    }
                                }
                                .padding(.top, 16)
                                .padding(.horizontal, 13.3)
                                
                                HStack(spacing: 5.3) {
                                    KFImage(URL(string: seriesDetail.creator.profileImage))
                                        .resizable()
                                        .scaledToFit()
                                        .clipShape(Circle())
                                        .frame(width: 26.7, height: 26.7)
                                    
                                    Text(seriesDetail.creator.nickname)
                                        .font(.custom(Font.medium.rawValue, size: 12))
                                        .foregroundColor(Color(hex: "909090"))
                                    
                                    Spacer()
                                    
                                    if seriesDetail.creator.creatorId != UserDefaults.int(forKey: .userId) {
                                        Image(viewModel.isFollow ? "btn_following_big" : "btn_follow_big")
                                            .onTapGesture {
                                                if viewModel.isFollow {
                                                    viewModel.unFollow(seriesDetail.creator.creatorId)
                                                } else {
                                                    viewModel.follow(seriesDetail.creator.creatorId)
                                                }
                                            }
                                    }
                                }
                                .padding(.top, 16)
                                .padding(.horizontal, 13.3)
                                
                                HStack(spacing: 0) {
                                    SeriesDetailTabView(
                                        title: "홈",
                                        width: screenSize().width / 2,
                                        isSelected: viewModel.currentTab == .home
                                    ) {
                                        if viewModel.currentTab != .home {
                                            viewModel.currentTab = .home
                                        }
                                    }
                                    
                                    SeriesDetailTabView(
                                        title: "작품소개",
                                        width: screenSize().width / 2,
                                        isSelected: viewModel.currentTab == .introduction
                                    ) {
                                        if viewModel.currentTab != .introduction {
                                            viewModel.currentTab = .introduction
                                        }
                                    }
                                }
                                .padding(.top, 16)
                                
                                Rectangle()
                                    .foregroundColor(Color.gray90.opacity(0.5))
                                    .frame(height: 1)
                                    .frame(maxWidth: .infinity)
                                
                                switch(viewModel.currentTab) {
                                case .introduction:
                                    SeriesDetailIntroductionView(
                                        width: screenSize().width - 26.7,
                                        seriesDetail: seriesDetail
                                    )
                                    
                                default:
                                    SeriesDetailHomeView(
                                        title: seriesDetail.title,
                                        seriesId: seriesDetail.seriesId,
                                        contentCount: seriesDetail.contentCount,
                                        contentList: seriesDetail.contentList
                                    )
                                }
                            }
                            .padding(.bottom, 10)
                            .background(Color.gray11)
                        }
                    }
                }
            }
        }
        .onAppear {
            viewModel.seriesId = seriesId
            viewModel.getSeriesDetail()
        }
    }
}

#Preview {
    SeriesDetailView(seriesId: 0)
}