import SwiftUI
import SlideOverCard

func impact(style: UIImpactFeedbackGenerator.FeedbackStyle) {
    UIImpactFeedbackGenerator(style: style).impactOccurred()
}

struct NutritionDataView: View {
    
    var foodName: String
    @State var foodText = ""

    @State var press = false
    @State var isPresented = false
    @State var falso = false
    
    @State var calories: String = ""
    @State var fat: Double
    @State var sugar: Double
    @State var dragToDismiss = false
    
    @State var servingSize = 1
    
    // show variables for cal, sug, and fat
    
    @State var showC = false
    @State var showF = false
    @State var showS = false
    
    
    var body: some View {
        
        
            VStack {
        
                Button(action: {
                    
                    impact(style: .heavy)
                    
                        isPresented = true
                    
                    
                }) {
                    Text(foodText)
                        .font(.system(size: 40, weight: .semibold, design: .rounded))
                        .foregroundColor(.black)
                        .frame(width: UIScreen.main.bounds.width - 40, height: 100)
                        .background(
                            ZStack {
                                Color(press ? #colorLiteral(red: 1.0, green: 1.0, blue: 1.0, alpha: 1.0) : #colorLiteral(red: 0.7608050108, green: 0.8164883852, blue: 0.9259157777, alpha: 1))
                                
                                RoundedRectangle(cornerRadius: 16, style: .continuous)
                                    .foregroundColor(Color(press ? #colorLiteral(red: 0.7608050108, green: 0.8164883852, blue: 0.9259157777, alpha: 1) : #colorLiteral(red: 1.0, green: 1.0, blue: 1.0, alpha: 1.0)))
                                    .blur(radius: 4)
                                    .offset(x: -8, y: -8)
                                
                                RoundedRectangle(cornerRadius: 16, style: .continuous)
                                    .fill(
                                        LinearGradient(gradient: Gradient(colors: [Color(#colorLiteral(red: 0.9019607843, green: 0.9294117647, blue: 0.9882352941, alpha: 1)), Color.white]), startPoint: .topLeading, endPoint: .bottomTrailing)
                                )
                                    .padding(2)
                                    .blur(radius: 2)
                            }
                    )
                        .clipShape(RoundedRectangle(cornerRadius: 16, style: .continuous))
                
            }.padding(15)
            
            VStack(alignment: .leading) {
            
                HStack(alignment: .center, spacing: 30) {
//                    RingView(color1:#colorLiteral(red: 0.5447652936, green: 0.1064532474, blue: 0.03292791173, alpha: 1) , color2:#colorLiteral(red: 1, green: 0.1709959209, blue: 0.02205365524, alpha: 1) , percent: Double(self.$calories), show: $showC, placeholder: "calories")
                        
                Text("Calories")
                    .font(.title).bold()
                    .foregroundColor(Color(#colorLiteral(red: 0.5447652936, green: 0.1064532474, blue: 0.03292791173, alpha: 1)))
                

                
            }.padding()
                
                Divider()
            
                VStack {
                    HStack {
                        HStack(spacing: 30) {
    //                        RingView(color1:#colorLiteral(red: 0.1960784346, green: 0.3411764801, blue: 0.1019607857, alpha: 1) , color2:#colorLiteral(red: 0.4666666687, green: 0.7647058964, blue: 0.2666666806, alpha: 1) , width: 75, height: 75, percent: ($sugar), placeholder: "Sugar", show: $showS)
                        
                        Text("Sugar")
                            .font(.title2).bold()
                            .foregroundColor(Color(#colorLiteral(red: 0.1960784346, green: 0.3411764801, blue: 0.1019607857, alpha: 1)))
                            
                        }.padding()
                        
                        
                        HStack(spacing: 30) {
        //                    RingView(color1: #colorLiteral(red: 0.2196078449, green: 0.007843137719, blue: 0.8549019694, alpha: 1), color2: #colorLiteral(red: 0.2392156869, green: 0.6745098233, blue: 0.9686274529, alpha: 1), width: 75, height: 75, percent: ($fat), placeholder: "Fat", show: $showF, servingSize: $servingSize)
                        
                        Text("Fat")
                            .font(.title3).bold()
                            .foregroundColor(Color(#colorLiteral(red: 0.2196078449, green: 0.007843137719, blue: 0.8549019694, alpha: 1)))
                            
                    }.padding()
                        
                        
                    }
                }
            
       
            
        }
            .padding()
                Divider()

                VStack {
                    Text("Serving Size")
                        .font(.title).bold()

                    Stepper(value: $servingSize, in: 1...10) {
                        Text("1/\(servingSize)")
                            .font(.title2).bold()
                    }

                }.padding()
                
            
            Spacer()
            
            
        }
            
            .onAppear {
                self.foodText = foodName.replacingOccurrences(of: "_", with: " ")

            }
            
            .slideOverCard(isPresented: $showC, dragToDismiss: $falso) {

                VStack {

                    Text("Edit Calories")
                        .font(.footnote).bold()
                        .padding(.bottom, 50)



                    TextField("", text: $calories)


                }

            }
            
            .slideOverCard(isPresented: $isPresented, dragToDismiss: $dragToDismiss) {
                
                VStack {
                    Text("Edit Food Name")
                        .font(.footnote).bold()
                        .padding(.bottom, 50)
                    
                        
                    
                    TextField("", text: $foodText)
                }


                
            }
            
            .padding(40)
            .preferredColorScheme(.light)
        }
        

}

struct NutritionDataView_Previews: PreviewProvider {
    static var previews: some View {
        NutritionDataView(foodName: "Steak", calories: ("100.0"), fat: (23.4), sugar: (12.3))
    }
}

let colors = [
    Color(#colorLiteral(red: 1, green: 0.1491314173, blue: 0, alpha: 1)),
    Color(#colorLiteral(red: 0.2392156869, green: 0.6745098233, blue: 0.9686274529, alpha: 1)),
    Color(#colorLiteral(red: 0.3411764801, green: 0.6235294342, blue: 0.1686274558, alpha: 1)),
    Color(#colorLiteral(red: 0, green: 0, blue: 0, alpha: 1)),
    Color(#colorLiteral(red: 0.9254902005, green: 0.2352941185, blue: 0.1019607857, alpha: 1))
]


struct RingView: View {
    var color1 = #colorLiteral(red: 0.4666666687, green: 0.7647058964, blue: 0.2666666806, alpha: 1)
    var color2 = #colorLiteral(red: 0.1960784346, green: 0.3411764801, blue: 0.1019607857, alpha: 1)
//    var color1: Color
//    var color2: Color
//    @Binding var servingSize: Float
    var width: CGFloat = 100
    var height: CGFloat = 100
    @Binding var percent: Double
    var placeholder: String
    @Binding var show: Bool
    
    @State var appear = false
    @State var presented = false
   
    
//    @Binding var nutritionalInfo: Double
   
    
    
    var body: some View {
        let multiplier = width/44
       

        
        return ZStack {
            
            Circle()
                .stroke(Color.black.opacity(0.1), style: StrokeStyle(lineWidth: 5 * multiplier))
                .frame(width: width, height: height)
            
            Circle()
                .trim(from: appear ? 0 : 1, to: 1)
                .stroke(
                    LinearGradient(gradient: Gradient(colors: [Color(color1), Color(color2)]), startPoint: .topTrailing, endPoint: .bottomLeading),
                    style: StrokeStyle(lineWidth: 5 * multiplier, lineCap: .round, lineJoin: .round, miterLimit: .infinity, dash: [20, 0], dashPhase: 0)
                )
                .rotationEffect(Angle(degrees: 90))
                .rotation3DEffect(Angle(degrees: 180), axis: (x: 1, y: 0, z: 0))
                .frame(width: width, height: height)
                .shadow(color: Color(color2).opacity(0.1), radius: 3 * multiplier, x: 0, y: 0)
                .animation(Animation.easeInOut(duration: 0.9))
                
            
            Text("\(Int(percent))")
                .foregroundColor(
                    Color(color1))
                .font(.system(size: 14 * multiplier))
                .fontWeight(.bold)
                
        }
        .onTapGesture {
            show = true
        }
        
        .onAppear {
            self.appear = true
        }

        
   
        

}
    
}