//
//  LiveRoomCreateTagView.swift
//  SodaLive
//
//  Created by klaus on 2023/08/14.
//

import SwiftUI
import Kingfisher

struct LiveRoomCreateTagView: View {
    
    let columns = [
        GridItem(.flexible()),
        GridItem(.flexible()),
        GridItem(.flexible()),
        GridItem(.flexible())
    ]
    
    @StateObject var viewModel = LiveRoomCreateTagViewModel()
    
    @Binding var isShowing: Bool
    @Binding var selectedTags: [String]
    
    var body: some View {
        ZStack {
            Color(hex: "222222").ignoresSafeArea()
            
            VStack(spacing: 0) {
                HStack(alignment: .top, spacing: 0) {
                    VStack(alignment: .leading, spacing: 6.7) {
                        Text("관심사 선택")
                            .font(.custom(Font.bold.rawValue, size: 18.3))
                            .foregroundColor(.white)
                        
                        Text("최대 3개까지 선택 가능합니다.")
                            .font(.custom(Font.medium.rawValue, size: 13.3))
                            .foregroundColor(Color(hex: "777777"))
                    }
                    
                    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.tags, id: \.self) { tag in
                            VStack(spacing: 16.7) {
                                ZStack {
                                    KFImage(URL(string: tag.image))
                                        .cancelOnDisappear(true)
                                        .downsampling(
                                            size: CGSize(
                                                width: 60,
                                                height: 60
                                            )
                                        )
                                        .resizable()
                                        .scaledToFill()
                                        .frame(width: 60, height: 60, alignment: .top)
                                        .clipped()
                                    
                                    if selectedTags.contains(tag.tag) {
                                        Image("ic_tag_check")
                                            .resizable()
                                            .frame(width: 60, height: 60)
                                    }
                                }
                                
                                Text(tag.tag)
                                    .font(.custom(Font.medium.rawValue, size: 14.7))
                                    .foregroundColor(
                                        selectedTags.contains(tag.tag) ?
                                        Color(hex: "9970ff") :
                                            Color(hex: "bbbbbb")
                                    )
                            }
                            .onTapGesture {
                                if selectedTags.contains(tag.tag) {
                                    if let index = selectedTags.firstIndex(of: tag.tag) {
                                        selectedTags.remove(at: index)
                                    }
                                } else {
                                    if selectedTags.count < 3 {
                                        selectedTags.append(tag.tag)
                                    }
                                }
                            }
                        }
                    }
                }
                .padding(.horizontal, 20)
                .padding(.top, 26.7)
                
                Text("확인")
                    .font(.custom(Font.bold.rawValue, size: 18.3))
                    .foregroundColor(.white)
                    .padding(.vertical, 16)
                    .frame(width: screenSize().width - 26.7)
                    .background(Color(hex: "9970ff"))
                    .cornerRadius(10)
                    .padding(.bottom, 26.7)
                    .onTapGesture {
                        isShowing = false
                    }
            }
            
            if viewModel.isLoading {
                LoadingView()
            }
        }
        .cornerRadius(16.7, corners: [.topLeft, .topRight])
        .onAppear {
            viewModel.getTags()
        }
    }
}
