//
//  ContentCreateSelectThemeView.swift
//  SodaLive
//
//  Created by klaus on 2023/08/11.
//

import SwiftUI
import Kingfisher

struct ContentCreateSelectThemeView: View {
    
    let columns = [
        GridItem(.flexible()),
        GridItem(.flexible()),
        GridItem(.flexible()),
        GridItem(.flexible())
    ]
    
    @StateObject var viewModel = ContentCreateSelectThemeViewModel()
    
    @Binding var isShowing: Bool
    @Binding var selectedTheme: GetAudioContentThemeResponse?
    
    var body: some View {
        ZStack {
            Color(hex: "222222").ignoresSafeArea()
            
            VStack(spacing: 0) {
                HStack(alignment: .top, spacing: 0) {
                    Text("테마 선택")
                        .font(.custom(Font.bold.rawValue, size: 18.3))
                        .foregroundColor(.white)
                    
                    Spacer()
                    
                    Image("ic_close_white")
                        .resizable()
                        .frame(width: 20, height: 20)
                        .onTapGesture { isShowing = false }
                }
                .padding(.horizontal, 26.7)
                .padding(.top, 26.7)
                
                ScrollView(.vertical, showsIndicators: false) {
                    LazyVGrid(columns: columns, spacing: 26.7) {
                        ForEach(viewModel.themes, id: \.self) { theme in
                            VStack(spacing: 16.7) {
                                KFImage(URL(string: theme.image))
                                    .resizable()
                                    .scaledToFill()
                                    .frame(width: 60, height: 60, alignment: .top)
                                    .clipShape(Circle())
                                
                                Text(theme.theme)
                                    .font(.custom(Font.medium.rawValue, size: 14.7))
                                    .foregroundColor(Color(hex: "bbbbbb"))
                            }
                            .onTapGesture {
                                selectedTheme = theme
                                isShowing = false
                            }
                        }
                    }
                }
                .padding(.horizontal, 20)
                .padding(.top, 26.7)
            }
            
            if viewModel.isLoading {
                LoadingView()
            }
        }
        .cornerRadius(16.7, corners: [.topLeft, .topRight])
        .onAppear {
            viewModel.getThemes()
        }
    }
}

struct ContentCreateSelectThemeView_Previews: PreviewProvider {
    static var previews: some View {
        ContentCreateSelectThemeView(
            isShowing: .constant(true),
            selectedTheme: .constant(GetAudioContentThemeResponse(id: 1, theme: "", image: ""))
        )
    }
}