//
//  RouletteSettingsView.swift
//  SodaLive
//
//  Created by klaus on 2023/12/05.
//

import SwiftUI

struct RouletteSettingsView: View {
    
    @StateObject var keyboardHandler = KeyboardHandler()
    @StateObject var viewModel = RouletteSettingsViewModel()
    
    @Binding var isShowing: Bool
    let onComplete: (Bool, String) -> Void
    
    var body: some View {
        GeometryReader { proxy in
            BaseView(isLoading: $viewModel.isLoading) {
                VStack(spacing: 0) {
                    DetailNavigationBar(title: "룰렛설정") {
                        isShowing = false
                    }
                    
                    ScrollView(.vertical, showsIndicators: false) {
                        VStack(spacing: 0) {
                            HStack(spacing: 13.3) {
                                SelectedButtonView(
                                    title: "룰렛 1",
                                    isActive: true,
                                    isSelected: viewModel.selectedRoulette == .ROULETTE_1
                                )
                                .onTapGesture {
                                    viewModel.selectRoulette(selectedRoulette: .ROULETTE_1)
                                }
                                
                                SelectedButtonView(
                                    title: "룰렛 2",
                                    isActive: viewModel.rouletteList.count > 0,
                                    isSelected: viewModel.selectedRoulette == .ROULETTE_2
                                )
                                .onTapGesture {
                                    viewModel.selectRoulette(selectedRoulette: .ROULETTE_2)
                                }
                                
                                SelectedButtonView(
                                    title: "룰렛 3",
                                    isActive: viewModel.rouletteList.count > 1,
                                    isSelected: viewModel.selectedRoulette == .ROULETTE_3
                                )
                                .onTapGesture {
                                    viewModel.selectRoulette(selectedRoulette: .ROULETTE_3)
                                }
                            }
                            .padding(.top, 26.7)
                            
                            HStack(spacing: 0) {
                                Text("룰렛을 활성화 하시겠습니까?")
                                    .font(.custom(Font.bold.rawValue, size: 16))
                                    .foregroundColor(Color(hex: "eeeeee"))
                                
                                Spacer()
                                
                                Image(viewModel.isActive ? "btn_toggle_on_big" : "btn_toggle_off_big")
                                    .resizable()
                                    .frame(width: 44, height: 27)
                                    .onTapGesture {
                                        viewModel.isActive.toggle()
                                    }
                            }
                            .padding(.top, 26.7)
                            
                            VStack(alignment: .leading, spacing: 13.3) {
                                Text("룰렛 금액 설정")
                                    .font(.custom(Font.bold.rawValue, size: 16))
                                    .foregroundColor(Color(hex: "eeeeee"))
                                
                                HStack(spacing: 8) {
                                    TextField("룰렛 금액을 입력해 주세요 (최소 5캔)", text: Binding(
                                        get: {
                                            self.viewModel.canText
                                        },
                                        set: { newValue in
                                            self.viewModel.canText = newValue.filter { "0123456789".contains($0) }
                                        }
                                    ))
                                    .autocapitalization(.none)
                                    .disableAutocorrection(true)
                                    .font(.custom(Font.medium.rawValue, size: 13.3))
                                    .foregroundColor(Color(hex: "eeeeee"))
                                    .keyboardType(.numberPad)
                                    .padding(.horizontal, 13.3)
                                    .padding(.vertical, 16.7)
                                    .frame(maxWidth: .infinity)
                                    .background(Color(hex: "222222"))
                                    .cornerRadius(6.7)
                                    
                                    Spacer()
                                    
                                    Text("캔")
                                        .font(.custom(Font.bold.rawValue, size: 16.7))
                                        .foregroundColor(Color(hex: "eeeeee"))
                                }
                            }
                            .padding(.top, 26.7)
                            
                            VStack(alignment: .leading, spacing: 21.3) {
                                Text("룰렛 옵션 설정")
                                    .font(.custom(Font.bold.rawValue, size: 16))
                                    .foregroundColor(Color(hex: "eeeeee"))
                                
                                HStack(spacing: 0) {
                                    Text("※ 룰렛 옵션은 최소 2개,\n최대 10개까지 설정할 수 있습니다.")
                                        .font(.custom(Font.medium.rawValue, size: 13.3))
                                        .foregroundColor(Color(hex: "ff5c49"))
                                    
                                    Spacer()
                                    
                                    Image("btn_add")
                                        .onTapGesture { viewModel.addOption() }
                                }
                            }
                            .padding(.top, 26.7)
                            
                            LazyVStack(spacing: 21.3) {
                                ForEach(viewModel.options.indices, id: \.self) { index in
                                    RouletteSettingsOptionView(
                                        option: viewModel.options[index],
                                        index: index,
                                        onClickDelete: { viewModel.deleteOption(index: index) }
                                    )
                                }
                            }
                            .padding(.top, 21.3)
                        }
                        .padding(.horizontal, 13.3)
                        .padding(.bottom, keyboardHandler.keyboardHeight)
                    }
                    
                    Spacer()
                    
                    HStack(spacing: 13.3) {
                        Text("미리보기")
                            .font(.custom(Font.bold.rawValue, size: 18.3))
                            .foregroundColor(Color(hex: "3bb9f1"))
                            .padding(.vertical, 16)
                            .frame(maxWidth: .infinity)
                            .overlay(
                                RoundedRectangle(cornerRadius: 10)
                                    .strokeBorder(lineWidth: 1)
                                    .foregroundColor(Color(hex: "3bb9f1"))
                            )
                            .onTapGesture {
                                viewModel.onClickPreview()
                            }
                        
                        Text("설정완료")
                            .font(.custom(Font.bold.rawValue, size: 18.3))
                            .foregroundColor(.white)
                            .padding(.vertical, 16)
                            .frame(maxWidth: .infinity)
                            .background(Color(hex: "3bb9f1"))
                            .cornerRadius(10)
                            .onTapGesture {
                                viewModel.createOrUpdateRoulette {
                                    onComplete($0, $1)
                                    isShowing = false
                                }
                            }
                    }
                    .padding(13.3)
                    .background(Color(hex: "222222"))
                    .cornerRadius(16.7, corners: [.topLeft, .topRight])
                    
                    if proxy.safeAreaInsets.bottom > 0 {
                        Rectangle()
                            .foregroundColor(Color(hex: "222222"))
                            .frame(width: screenSize().width, height: 15.3)
                    }
                }
                .onTapGesture {
                    hideKeyboard()
                }
                
                if let preview = viewModel.previewData, viewModel.isShowPreview {
                    RoulettePreviewDialog(
                        isShowing: $viewModel.isShowPreview,
                        title: "룰렛 미리보기",
                        onClickSpin: nil,
                        previewList: [preview]
                    )
                }
            }
            .popup(isPresented: $viewModel.isShowErrorPopup, type: .toast, position: .top, autohideIn: 1.3) {
                GeometryReader { geo in
                    HStack {
                        Spacer()
                        Text(viewModel.errorMessage)
                            .padding(.vertical, 13.3)
                            .frame(width: geo.size.width - 66.7, alignment: .center)
                            .font(.custom(Font.medium.rawValue, size: 12))
                            .background(Color(hex: "9970ff"))
                            .foregroundColor(Color.white)
                            .multilineTextAlignment(.center)
                            .cornerRadius(20)
                            .padding(.top, 66.7)
                        Spacer()
                    }
                }
            }
            .onAppear {
                viewModel.getAllRoulette(creatorId: UserDefaults.int(forKey: .userId))
            }
        }
    }
}

struct RouletteSettingsView_Previews: PreviewProvider {
    static var previews: some View {
        RouletteSettingsView(isShowing: .constant(true)) { _, _ in }
    }
}