//
//  ContentOrderConfirmDialogView.swift
//  SodaLive
//
//  Created by klaus on 2023/08/13.
//

import SwiftUI
import Kingfisher

struct ContentOrderConfirmDialogView: View {
    
    @Binding var isShowing: Bool
    
    let audioContent: GetAudioContentDetailResponse
    let orderType: OrderType
    let onClickConfirm: () -> Void
    
    var body: some View {
        ZStack {
            Color
                .black
                .opacity(0.7)
                .ignoresSafeArea()
            
            VStack(spacing: 0) {
                Text("구매확인")
                    .font(.custom(Font.bold.rawValue, size: 18.3))
                    .foregroundColor(Color(hex: "eeeeee"))
                
                HStack(spacing: 11) {
                    ZStack(alignment: .topLeading) {
                        KFImage(URL(string: audioContent.coverImageUrl))
                            .resizable()
                            .frame(width: 88.7, height: 88.7, alignment: .center)
                            .clipped()
                            .cornerRadius(4)
                        
                        if audioContent.isAdult {
                            Text("19")
                                .font(.custom(Font.bold.rawValue, size: 11.3))
                                .foregroundColor(Color.white)
                                .padding(4)
                                .background(Color(hex: "e53621"))
                                .clipShape(Circle())
                                .padding(.leading, 4.3)
                                .padding(.top, 4.3)
                        }
                    }
                    
                    VStack(alignment: .leading, spacing: 0) {
                        Text(audioContent.themeStr)
                            .font(.custom(Font.medium.rawValue, size: 8))
                            .foregroundColor(Color(hex: "3bac6a"))
                            .padding(2.3)
                            .background(Color(hex: "28312b"))
                            .cornerRadius(2)
                        
                        Text(audioContent.title)
                            .font(.custom(Font.bold.rawValue, size: 11.3))
                            .foregroundColor(Color(hex: "d2d2d2"))
                            .padding(.top, 2)
                        
                        HStack(spacing: 4.3) {
                            KFImage(URL(string: audioContent.creator.profileImageUrl))
                                .cancelOnDisappear(true)
                                .resizable()
                                .frame(width: 13.3, height: 13.3)
                                .clipShape(Circle())
                            
                            Text(audioContent.creator.nickname)
                                .font(.custom(Font.medium.rawValue, size: 10))
                                .foregroundColor(Color(hex: "777777"))
                        }
                        .padding(.top, 6.7)
                        
                        Text(audioContent.duration)
                            .font(.custom(Font.medium.rawValue, size: 11))
                            .foregroundColor(Color(hex: "777777"))
                            .padding(.top, 6.7)
                    }
                    
                    Spacer()
                }
                .padding(8)
                .background(Color.black)
                .cornerRadius(5.3)
                .padding(.top, 21.3)
                
                Text("콘텐츠를 \(orderType == .RENTAL ? "대여" : "소장")하시겠습니까?\n아래 코인이 차감됩니다.")
                    .font(.custom(Font.medium.rawValue, size: 13.3))
                    .foregroundColor(Color(hex: "eeeeee"))
                    .fixedSize(horizontal: false, vertical: true)
                    .multilineTextAlignment(.center)
                    .padding(.top, 13.3)
                
                HStack(spacing: 2.7) {
                    Spacer()
                    
                    Image("ic_can")
                        .resizable()
                        .frame(width: 16.7, height: 16.7)
                    
                    Text("\(orderType == .RENTAL ? Int(ceil(Double(audioContent.price) * 0.7)) : audioContent.price)")
                        .font(.custom(Font.bold.rawValue, size: 13.3))
                        .foregroundColor(Color(hex: "eeeeee"))
                    
                    Spacer()
                }
                .padding(.vertical, 13.3)
                .background(Color(hex: "333333"))
                .cornerRadius(6.7)
                .overlay(
                    RoundedRectangle(cornerRadius: CGFloat(6.7))
                        .stroke(lineWidth: 1)
                        .foregroundColor(Color(hex: "979797"))
                )
                .padding(.top, 13.3)
                
                HStack(spacing: 12) {
                    Text("취소")
                        .font(.custom(Font.bold.rawValue, size: 18.3))
                        .foregroundColor(Color(hex: "9970ff"))
                        .padding(.vertical, 15.7)
                        .frame(maxWidth: .infinity)
                        .overlay(
                            RoundedRectangle(cornerRadius: CGFloat(10))
                                .stroke(lineWidth: 1)
                                .foregroundColor(Color(hex: "9970ff"))
                        )
                        .onTapGesture { isShowing = false }
                    
                    Text("확인")
                        .font(.custom(Font.bold.rawValue, size: 18.3))
                        .foregroundColor(.white)
                        .padding(.vertical, 15.7)
                        .frame(maxWidth: .infinity)
                        .background(Color(hex: "9970ff"))
                        .cornerRadius(10)
                        .onTapGesture {
                            onClickConfirm()
                            isShowing = false
                        }
                }
                .padding(.top, 21.3)
            }
            .padding(.horizontal, 13.3)
            .padding(.top, 26.7)
            .padding(.bottom, 16.7)
            .background(Color(hex: "222222"))
            .cornerRadius(10)
            .padding(.horizontal, 20)
        }
    }
}