//
//  ContentPlaylistListView.swift
//  SodaLive
//
//  Created by klaus on 12/7/24.
//

import SwiftUI

struct ContentPlaylistListView: View {
    
    @StateObject var viewModel = ContentPlaylistListViewModel()
    
    let onClickCreate: () -> Void
    let onClickItem: (Int) -> Void
    
    var body: some View {
        BaseView(isLoading: $viewModel.isLoading) {
            VStack(spacing: 13.3) {
                Text("+ 새 재생목록 만들기")
                    .font(.custom(Font.bold.rawValue, size: 14.7))
                    .foregroundColor(Color.white)
                    .padding(.vertical, 13.3)
                    .frame(maxWidth: .infinity)
                    .background(Color.button)
                    .cornerRadius(5.3)
                    .contentShape(Rectangle())
                    .onTapGesture {
                        onClickCreate()
                    }
                
                if viewModel.playlists.isEmpty {
                    VStack(spacing: 13.3) {
                        Text("재생목록이 비어있습니다.")
                            .font(.custom(Font.bold.rawValue, size: 14.7))
                            .foregroundColor(Color.grayee)
                        
                        Text("자주 듣는 콘텐츠를\n재생목록으로 만들어 보세요.")
                            .font(.custom(Font.medium.rawValue, size: 11))
                            .foregroundColor(Color.grayee)
                            .multilineTextAlignment(.center)
                    }
                    .frame(maxWidth: .infinity, maxHeight: .infinity)
                    .background(Color.bg)
                    .cornerRadius(4.7)
                } else {
                    HStack(spacing: 5.3) {
                        Text("전체")
                            .font(.custom(Font.medium.rawValue, size: 14.7))
                            .foregroundColor(Color.white)
                        
                        Text("\(viewModel.totalCount)개")
                            .font(.custom(Font.medium.rawValue, size: 12))
                            .foregroundColor(Color.gray90)
                        
                        Spacer()
                    }
                    .frame(maxWidth: .infinity)
                    
                    ScrollView(.vertical) {
                        LazyVStack(spacing: 11) {
                            ForEach(0..<viewModel.playlists.count, id: \.self) { index in
                                let playlist = viewModel.playlists[index]
                                ContentPlaylistItemView(item: playlist)
                                    .contentShape(Rectangle())
                                    .onTapGesture {
                                        onClickItem(playlist.id)
                                    }
                            }
                        }
                    }
                }
            }
            .popup(isPresented: $viewModel.isShowPopup, type: .toast, position: .bottom, autohideIn: 2) {
                HStack {
                    Spacer()
                    Text(viewModel.errorMessage)
                        .padding(.vertical, 13.3)
                        .frame(width: screenSize().width - 66.7, alignment: .center)
                        .font(.custom(Font.medium.rawValue, size: 12))
                        .background(Color.button)
                        .foregroundColor(Color.white)
                        .multilineTextAlignment(.leading)
                        .cornerRadius(20)
                        .padding(.bottom, 66.7)
                    Spacer()
                }
            }
            .onAppear {
                viewModel.getPlaylistList()
            }
        }
    }
}

#Preview {
    ContentPlaylistListView(onClickCreate: {}, onClickItem: { _ in })
}