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

import SwiftUI

struct RoulettePreviewDialog: View {
    
    @Binding var isShowing: Bool
    
    let title: String?
    let onClickSpin: (() -> Void)?
    let preview: RoulettePreview
    
    var body: some View {
        GeometryReader { geo in
            ZStack {
                VStack(spacing: 0) {
                    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, 16.7)
                    .padding(.horizontal, 13.3)
                    
                    LazyVStack(alignment: .leading, spacing: 13.3) {
                        ForEach(preview.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("\(preview.items[index].title) (\(preview.items[index].percent))")
                                    .font(.custom(Font.medium.rawValue, size: 14.7))
                                    .foregroundColor(Color(hex: "e2e2e2"))
                            }
                        }
                    }
                    .padding(.top, 13.3)
                    .padding(.horizontal, 13.3)
                    
                    HStack(spacing: 13.3) {
                        Text("취소")
                            .font(.custom(Font.bold.rawValue, size: 16))
                            .foregroundColor(Color(hex: "3bb9f1"))
                            .padding(.horizontal, 18)
                            .padding(.vertical, 16)
                            .overlay(
                                RoundedRectangle(cornerRadius: 10)
                                    .stroke(Color(hex: "3bb9f1"), lineWidth: 1)
                            )
                            .onTapGesture {
                                isShowing = false
                            }
                        
                        Text("\(preview.can)캔으로 룰렛 돌리기")
                            .font(.custom(Font.bold.rawValue, size: 16))
                            .foregroundColor(.white)
                            .padding(.vertical, 16)
                            .frame(maxWidth: .infinity)
                            .background(Color(hex: "3bb9f1"))
                            .cornerRadius(10)
                            .onTapGesture {
                                if let onClickSpin = onClickSpin {
                                    onClickSpin()
                                }
                                isShowing = false
                            }
                    }
                    .padding(.top, 26.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,
            preview: RoulettePreview(
                can: 100,
                items: [
                    RoulettePreviewItem(title: "옵션1", percent: "10%"),
                    RoulettePreviewItem(title: "옵션2", percent: "90%"),
                ]
            )
        )
    }
}