//
//  RoulettePreviewDialog.swift
//  SodaLive
//
//  Created by klaus on 2023/12/06.
//

import SwiftUI

struct RoulettePreviewDialog: View {
    
    @Binding var isShowing: Bool
    
    let title: String?
    let onClickSpin: ((Int) -> Void)?
    let previewList: [RoulettePreview]
    
    @State var selectedRoulette = SelectedRoulette.ROULETTE_1
    
    var body: some View {
        GeometryReader { geo in
            ZStack {
                VStack(spacing: 16.7) {
                    if previewList.count > 1 {
                        HStack(spacing: 13.3) {
                            SelectedButtonView(
                                title: "룰렛 1",
                                isActive: true,
                                isSelected: selectedRoulette == .ROULETTE_1
                            )
                            .onTapGesture {
                                if selectedRoulette != .ROULETTE_1 {
                                    selectedRoulette = .ROULETTE_1
                                }
                            }
                            
                            SelectedButtonView(
                                title: "룰렛 2",
                                isActive: true,
                                isSelected: selectedRoulette == .ROULETTE_2,
                                checkImage: "ic_select_check_black",
                                bgSelectedColor: Color(hex: "ffcb14"),
                                textSelectedColor: Color.black,
                                textDefaultColor: Color(hex: "ffcb14")
                            )
                            .onTapGesture {
                                if selectedRoulette != .ROULETTE_2 {
                                    selectedRoulette = .ROULETTE_2
                                }
                            }
                            
                            if previewList.count > 2 {
                                SelectedButtonView(
                                    title: "룰렛 3",
                                    isActive: true,
                                    isSelected: selectedRoulette == .ROULETTE_3,
                                    bgSelectedColor: Color(hex: "ff14d9"),
                                    textDefaultColor: Color(hex: "ff14d9")
                                )
                                .onTapGesture {
                                    if selectedRoulette != .ROULETTE_3 {
                                        selectedRoulette = .ROULETTE_3
                                    }
                                }
                            }
                        }
                        .padding(.top, 16.7)
                    }
                    
                    HStack(spacing: 0) {
                        Text(title ?? "룰렛")
                            .font(.custom(Font.bold.rawValue, size: 18.3))
                            .foregroundColor(.white)
                        
                        Spacer()
                        
                        if let _ = onClickSpin {
                            HStack(spacing: 6.7) {
                                Image("ic_can")
                                Text("\(UserDefaults.int(forKey: .can))")
                                    .font(.custom(Font.bold.rawValue, size: 16))
                                    .foregroundColor(Color(hex: "eeeeee"))
                                Image("ic_forward")
                            }
                            .onTapGesture {
                                isShowing = false
                                DispatchQueue.main.async {
                                    AppState.shared.setAppStep(step: .canCharge(refresh: {}, afterCompletionToGoBack: true))
                                }
                            }
                        }
                    }
                    .padding(.top, previewList.count > 1 ? 0 : 16.7)
                    .padding(.horizontal, 13.3)
                    
                    LazyVStack(alignment: .leading, spacing: 13.3) {
                        ForEach(previewList[selectedRoulette.rawValue].items.indices, id: \.self) { index in
                            HStack(spacing:13.3) {
                                Text("\(index + 1)")
                                    .font(.custom(Font.bold.rawValue, size: 14.7))
                                    .foregroundColor(Color(hex: "e2e2e2"))
                                
                                Text("\(previewList[selectedRoulette.rawValue].items[index].title) (\(previewList[selectedRoulette.rawValue].items[index].percent))")
                                    .font(.custom(Font.medium.rawValue, size: 14.7))
                                    .foregroundColor(Color(hex: "e2e2e2"))
                            }
                        }
                    }
                    .padding(.horizontal, 13.3)
                    
                    HStack(spacing: 13.3) {
                        Text("취소")
                            .font(.custom(Font.bold.rawValue, size: 16))
                            .foregroundColor(
                                selectedRoulette == .ROULETTE_2 ? Color(hex: "ffcb14") :
                                    selectedRoulette == .ROULETTE_3 ? Color(hex: "ff14d9") :
                                    Color.button
                            )
                            .padding(.horizontal, 18)
                            .padding(.vertical, 16)
                            .overlay(
                                RoundedRectangle(cornerRadius: 10)
                                    .stroke(
                                        selectedRoulette == .ROULETTE_2 ? Color(hex: "ffcb14") :
                                            selectedRoulette == .ROULETTE_3 ? Color(hex: "ff14d9") :
                                            Color.button,
                                        lineWidth: 1
                                    )
                            )
                            .onTapGesture {
                                isShowing = false
                            }
                        
                        Text("\(previewList[selectedRoulette.rawValue].can)캔으로 룰렛 돌리기")
                            .font(.custom(Font.bold.rawValue, size: 16))
                            .foregroundColor(selectedRoulette == .ROULETTE_2 ? .black : .white)
                            .padding(.vertical, 16)
                            .frame(maxWidth: .infinity)
                            .background(
                                selectedRoulette == .ROULETTE_2 ? Color(hex: "ffcb14") :
                                    selectedRoulette == .ROULETTE_3 ? Color(hex: "ff14d9") :
                                    Color.button
                            )
                            .cornerRadius(10)
                            .onTapGesture {
                                if let onClickSpin = onClickSpin {
                                    onClickSpin(previewList[selectedRoulette.rawValue].id)
                                }
                                isShowing = false
                            }
                    }
                    .padding(.top, 6.7)
                }
                .padding(13.3)
                .background(Color(hex: "222222"))
                .cornerRadius(16.7)
                .padding(.horizontal, 13.3)
            }
            .frame(width: geo.size.width, height: geo.size.height)
            .background(Color.black.opacity(0.7))
        }
    }
}

struct RoulettePreviewDialog_Previews: PreviewProvider {
    static var previews: some View {
        RoulettePreviewDialog(
            isShowing: .constant(true),
            title: nil,
            onClickSpin: nil,
            previewList: [
                RoulettePreview(
                    id: 0,
                    can: 100,
                    items: [
                        RoulettePreviewItem(title: "옵션1", percent: "33.40%"),
                        RoulettePreviewItem(title: "옵션2", percent: "66.60%"),
                    ]
                ),
                RoulettePreview(
                    id: 1,
                    can: 10,
                    items: [
                        RoulettePreviewItem(title: "옵션3", percent: "10.8%"),
                        RoulettePreviewItem(title: "옵션4", percent: "89.2%"),
                    ]
                ),
                RoulettePreview(
                    id: 2,
                    can: 1000,
                    items: [
                        RoulettePreviewItem(title: "옵션5", percent: "10%"),
                        RoulettePreviewItem(title: "옵션6", percent: "90%"),
                    ]
                )
            ]
        )
    }
}