//
//  NavigationBar.swift
//  qlick
//
//  Created by Brian Mwangi on 08/07/2022.
//

import SwiftUI

struct NavigationBar: View {
    var title: String = ""
    @Binding var hasScrolled: Bool
    @Environment(LoginStatus.self) var loginStatus
    @State var isLoginModalPresented = false

    var body: some View {
        ZStack {
            Color.clear
                .background(.ultraThinMaterial)
                .blur(radius: 10)
                .opacity(hasScrolled ? 0 : 1)
            if(loginStatus.isLogin){
                Text(Storage.shared.member_name)
                    .animatableFont(size: hasScrolled ? 22: 34, weight: .bold)
                    .frame(maxWidth: .infinity, alignment: .leading)
                .padding(.leading, 20)
                .padding(.top, 20)
                
                
                HStack {
                        //AsyncImage
                    CachedAsyncImage(url: URL(string: API.imageUrl + Storage.shared.member_avatar)) { image in
                                image
                            .resizable()
                            .frame(width: 26, height: 26)
                            .cornerRadius(10)
                            .padding(8)
                            .background(.ultraThinMaterial, in: RoundedRectangle(cornerRadius: 18, style: .continuous))
                            .strokeStyle(cornerRadius: 18)
                        
                            } placeholder: {
                                ZStack {
                                    Color.secondary.opacity(0.25)
                                    Image(systemName: "person")
                                        .imageScale(.large)
                                        .blendMode(.overlay)
                                }
                            }
                            .clipped()

                }
                .frame(maxWidth: .infinity, alignment: .trailing)
                .padding(.trailing, 20)
                .padding(.top, 20)
                .offset(y: hasScrolled ? -4 : 0)
            }else{
                Text("Sign In")
                    .animatableFont(size: hasScrolled ? 22: 34, weight: .bold)
                    .frame(maxWidth: .infinity, alignment: .leading)
                .padding(.leading, 20)
                .padding(.top, 20)
                    .onTapGesture {
                        if(!loginStatus.isLogin){
                            isLoginModalPresented = true
                        }
                    }
                    .fullScreenCover(isPresented: $isLoginModalPresented){//sheet
                        
                        if(!loginStatus.isLogin){
                            LoginView()
                        }
                    }
            }


        }
        .frame(height: hasScrolled ? 44 : 70)
            .frame(maxHeight: .infinity, alignment: .top)
    }
}

struct NavigationBar_Previews: PreviewProvider {
    static var previews: some View {
        NavigationBar(title: "Featured", hasScrolled: .constant(false))
    }
}