//
//  ContentView.swift
//  comments
//
//  Created by Эрнест Литвиненко on 11.03.2024.
//

import SwiftUI
import DynamicColor

struct Theme {
    public static let bg = Color(hexString: "#1E1F1F")
    public static let white = Color(hexString: "#EAEAEA")
    public static let skyBlue = Color(hexString: "#B2D0CE")
    public static let lightYellow = Color(hexString: "#F1FE87")
    public static let lightPurple = Color(hexString: "#B8A9C6")
    
    public static let btnBg = Color(hexString: "#3E3E3E")
    
    public static let skyGradient = LinearGradient(colors: [Theme.white, Theme.skyBlue], startPoint: UnitPoint(x: 0, y: 0), endPoint: UnitPoint(x: 0, y: 1))
}


struct BalanceView: View {
    @State var balance: FetchBalance? = nil
    
    @ViewBuilder
    var body: some View {
        HStack{
            VStack(alignment: .leading, content: {
                Text("Your Balance:").foregroundStyle(.white).font(.title2)
                if balance != nil {
                    Text("\(balance!.currency) \(balance!.amount)").foregroundStyle(.white).font(.title2).fontWeight(/*@START_MENU_TOKEN@*/.bold/*@END_MENU_TOKEN@*/)
                }
                else {
                    Text("$ 0").foregroundStyle(.white).font(.title2).fontWeight(/*@START_MENU_TOKEN@*/.bold/*@END_MENU_TOKEN@*/)
                }
                
            })
            
            Spacer()
            Button(action: /*@START_MENU_TOKEN@*/{}/*@END_MENU_TOKEN@*/){
                Image(systemName: "magnifyingglass").fontWeight(.bold)
            }.padding().foregroundColor(.white).background(Theme.btnBg).cornerRadius(100)
            
        }.task {
            self.balance = await Api().fetchBalance()
        }
    }
}

struct ContentView: View {
    @State var posts: [PostStruct] = []
    
    var body: some View {
        NavigationStack {
            ZStack{
                Color.bg.ignoresSafeArea()
                VStack {
                    Image(.logo)
                    BalanceView().padding(.bottom, 24)
                    CardsView()
                    
                    Spacer()
                    
                }.padding()
            }
        .navigationDestination(for: CardProps.self, destination: { card in
                DetailedCardView(card: card)
                .navigationBarHidden(true)
            })
        .navigationBarHidden(true)
        }
    }}


struct CardsView: View {
    @State var cardViews: [CardProps] = []
    
    var body: some View {
        ScrollView(Axis.Set.horizontal) {
            HStack{
                ForEach(cardViews) { card in
                    CardView(cardType: card).padding(.trailing, 13)
                }
            }
        }.scrollIndicators(.hidden).task {
            self.cardViews = await Api().fetchCards()
        }

    }
}




struct CardView: View {
    @State var cardType: CardProps
    let nf = NumberFormatter()
    
    
    init(cardType: CardProps) {
        self.cardType = cardType
        nf.numberStyle = .decimal
    }
    
    var body: some View {
        NavigationLink(value: cardType, label:{
            VStack(alignment: .leading, content: {
                Image(.visa).padding(.bottom, 10)
                Text(cardType.name).foregroundColor(.black)
                Text("$ \(nf.string(from: cardType.amount as NSNumber)!)").padding(.bottom, 10)
                Text("** \(cardType.lastDigits)").foregroundColor(.black)
            })
            .foregroundColor(.black)
            .padding(.all, 16.0).padding(.trailing, 50)
            .background(Theme.skyGradient)
            .cornerRadius(20)
    
        }
            
        )}
    }


struct LeftIconNavigation: View {
    @Environment(\.dismiss) private var dismiss
    
    var body: some View {
        Button(action: {dismiss()}) {
            Image(systemName: "chevron.left")
        }.foregroundColor(.white).padding().background(Theme.btnBg).fontWeight(.bold).clipShape(.circle)
    }
}

struct DetailedCardView: View {
    
    @State var card: CardProps
    init(card: CardProps) {
        self.card = card
    }
    
    var body: some View {
        
        ZStack{
            Color.bg.ignoresSafeArea()
            VStack {
            HStack{
                    LeftIconNavigation().frame(width: 32, height: 32, alignment: .leading)
                    Spacer()
                    Text(card.name).font(.title).foregroundColor(.white).fontWeight(.bold).frame(alignment: /*@START_MENU_TOKEN@*/.center/*@END_MENU_TOKEN@*/).padding(.leading, -32)
                    Spacer()
                }
                    VStack {
                        HStack{
                            Image(.visa)
                            Spacer()
                            Text(String(format: "$ %.2f", card.amount)).font(.title3).fontWeight(.bold)
                        }.padding()
                        HStack {
                            Text(".... .... .... \(card.lastDigits)").font(.title3).fontWeight(/*@START_MENU_TOKEN@*/.bold/*@END_MENU_TOKEN@*/)
                            Spacer()
                        }.padding()
                        HStack {
                            Text("Ivanov Ivan").bold().font(.title2)
                            Spacer()
                        }.padding()
                        HStack{
                        }
                    }.background(Theme.skyGradient).cornerRadius(20).padding()
                Spacer()
                
            }.padding()
        }
        
    }
}

#Preview {
    ContentView()
}