import MapKit
import SwiftUI

struct MapView: View {
    @State private var showSheet = true
    
    @State private var region = MKCoordinateRegion(center: CLLocationCoordinate2D(latitude: 32.61898690419252, longitude: -119.92923321769518), span: MKCoordinateSpan(latitudeDelta: 10, longitudeDelta: 10))
    
    var body: some View {
        ZStack(alignment: .bottom) {
            Map(coordinateRegion: $region)
                .edgesIgnoringSafeArea(.all)
            
        }
        .sheet(isPresented: $showSheet) {
            ScrollView(.vertical, showsIndicators: false) {
                // Sheet Header
                VStack(alignment: .leading) {
                    HStack{
                        Button {
                            // add action
                        } label: {
                            Image(systemName: "chevron.left")
                                .font(.system(size: 20, weight: .semibold))
                                .foregroundColor(.gray10)
                        }
                        Spacer()
                        Button {
                            // add action
                        } label: {
                            Image(systemName: "square.and.arrow.up")
                                .font(.system(size: 20, weight: .semibold))
                                .foregroundColor(.gray10)
                        }
                    }
                    .padding(.bottom, 6)
                    
                    
                    HStack(spacing:14)  {
                        ZStack {
                            RoundedRectangle(cornerRadius: 10)
                                .frame(width: 75, height: 75)
                                .foregroundColor(.white)
                            Text("🌴")
                                .font(.system(size:30))
                            
                        }
                        
                        VStack(alignment:.leading) {
                            Text("California")
                                .font(.system(size: 24, weight: .semibold))
                            Text("by @clark")
                                .font(.system(size: 16, weight: .regular))
                            
                        }
                    }
                    .padding(.bottom, 12)
                    
                    HStack {
                        Spacer()
                        VStack {
                            Text("52")
                                .font(.system(size: 24, weight: .medium))
                            Text("Views")
                                .font(.system(size: 16, weight: .regular))
                                .foregroundColor(.gray11)

                        }
                        Spacer()
                        VStack {
                            Text("14")
                                .font(.system(size: 24, weight: .medium))
                            Text("Places")
                                .font(.system(size: 16, weight: .regular))
                                .foregroundColor(.gray11)
                        }
                        Spacer()
                        VStack {
                            Text("27")
                                .font(.system(size: 24, weight: .medium))
                            Text("Shares")
                                .font(.system(size: 16, weight: .regular))
                                .foregroundColor(.gray11)
                        }
                        Spacer()
                    }
                    
                    
                }
                


                Divider()
                    .padding(.vertical,10)

                
                // Sheet List
                
                // Location #1
                HStack(spacing: 12){
                    RoundedRectangle(cornerRadius: 6)
                        .frame(width: 50, height: 50)
                        .foregroundStyle(.thinMaterial)
                    
                    VStack(alignment: .leading, spacing: 5){
                        Text("Beaf Flag Fish Company")
                            .fontWeight(.semibold)
                        HStack(spacing: 4) {
                            Image(systemName: "star.fill")
                                .font(.system(size: 13, weight: .regular))
                                .opacity(0.75)
                            Text("4.8")
                                .font(.system(size: 14, weight: .regular))
                                .opacity(0.75)
                        }
                    }
                    .frame(maxWidth: .infinity,alignment: .leading)
                    
                    Button {
                        // add action
                    } label: {
                        Image(systemName: "chevron.forward")
                            .font(.system(size: 12, weight: .regular))
                            .foregroundColor(.primary)
                            .opacity(0.6)
                    }
                }
                .padding(.bottom,20)
                
                // Location #2
                HStack(spacing: 12){
                    RoundedRectangle(cornerRadius: 6)
                        .frame(width: 50, height: 50)
                        .foregroundStyle(.thinMaterial)

                    VStack(alignment: .leading, spacing: 5){
                        Text("Milligram Coffee & Kitchen")
                            .fontWeight(.semibold)
                        HStack(spacing: 4) {
                            Image(systemName: "star.fill")
                                .font(.system(size: 13, weight: .regular))
                                .opacity(0.75)
                            Text("5.0")
                                .font(.system(size: 14, weight: .regular))
                                .opacity(0.75)
                        }
                        
                    }
                    .frame(maxWidth: .infinity,alignment: .leading)
                    
                    Button {
                        // add action
                    } label: {
                        Image(systemName: "chevron.forward")
                            .font(.system(size: 12, weight: .regular))
                            .foregroundColor(.primary)
                            .opacity(0.6)
                    }
                }
                .padding(.bottom,20)
                
                // Location #3
                HStack(spacing: 12){
                    RoundedRectangle(cornerRadius: 6)
                        .frame(width: 50, height: 50)
                        .foregroundStyle(.thinMaterial)

                    VStack(alignment: .leading, spacing: 5){
                        Text("Ho Sum Bistro")
                            .fontWeight(.semibold)
                        HStack(spacing: 4) {
                            Image(systemName: "star.fill")
                                .font(.system(size: 13, weight: .regular))
                                .opacity(0.75)
                            Text("4.9")
                                .font(.system(size: 14, weight: .regular))
                                .opacity(0.75)
                        }
                    }
                    .frame(maxWidth: .infinity,alignment: .leading)
                    
                    Button {
                        // add action
                    } label: {
                        Image(systemName: "chevron.forward")
                            .font(.system(size: 12, weight: .regular))
                            .foregroundColor(.primary)
                            .opacity(0.6)
                    }
                }
                
            }
            .presentationDetents([.medium,.large])
            .presentationBackground(.regularMaterial)
            .interactiveDismissDisabled()
            .padding(EdgeInsets(top: 20, leading: 20, bottom: 0, trailing: 20))
        }
    }           
}

struct MapView_Previews: PreviewProvider {
    static var previews: some View {
        MapView()
    }
}