//
//  ContentView.swift
//  LearnMapKit
//
//  Created by Jacky Jack on 05/06/2024.
//

import SwiftUI
import MapKit

struct ContentView: View {
    
    
    @State private var region = MKCoordinateRegion()
    
    let initialPosition: MapCameraPosition = {
        let center = CLLocationCoordinate2D(latitude: 55.90159, longitude:-3.53154)
        let span = MKCoordinateSpan(latitudeDelta: 0.1, longitudeDelta: 0.1)
        let region = MKCoordinateRegion(center: center, span: span)
        return .region(region)
    }()
    
    let position1 = CLLocationCoordinate2D(latitude: 55.80159, longitude:-3.53154)
    let position2 = CLLocationCoordinate2D(latitude: 55.99159, longitude:-3.53154)
    let position3 = CLLocationCoordinate2D(latitude: 55.80159, longitude:-3.43154)
    let position4 = CLLocationCoordinate2D(latitude: 55.80159, longitude:-3.63154)
    
    var body: some View {
        
        VStack {
            HStack(alignment: .top) {
                Button("1") {
                    print("Pressed 1")
                }
                Button("2") {
                    print("Pressed 2")
                }
                Button("3") {
                    print("Pressed 3")
                }
                Button("4") {
                    print("Pressed 4")
                }
                Button("5") {
                    print("Pressed 5")
                }
                Button("6") {
                    print("Pressed 6")
                }
                Button("7") {
                    print("Pressed 7")
                }
            }
            .border(.blue)
            //.frame(maxWidth:.infinity)
            //.padding()
            
            Map(initialPosition: initialPosition) {
                Annotation("plane1", coordinate: position1) {
                    ZStack {
                        RoundedRectangle(cornerRadius: 10)
                            .fill(.background)
                        RoundedRectangle(cornerRadius: 10)
                            .stroke(.secondary,lineWidth: 5)
                        Image(systemName:"airplane.circle.fill")
                            .resizable()
                            .frame(width:20,height: 20)
                    }
                }.annotationTitles(.hidden)
                Annotation("plane2", coordinate: position2) {
                    ZStack {
                        RoundedRectangle(cornerRadius: 10)
                            .fill(.background)
                        RoundedRectangle(cornerRadius: 10)
                            .stroke(.secondary,lineWidth: 5)
                        Image(systemName:"airplane.circle.fill")
                            .resizable()
                            .frame(width:20,height: 20)
                    }
                }.annotationTitles(.hidden)
                Annotation("plane3", coordinate: position3) {
                    ZStack {
                        RoundedRectangle(cornerRadius: 10)
                            .fill(.background)
                        RoundedRectangle(cornerRadius: 10)
                            .stroke(.secondary,lineWidth: 5)
                        Image(systemName:"airplane.circle.fill")
                            .resizable()
                            .frame(width:20,height: 20)
                    }
                }.annotationTitles(.hidden)
                Annotation("plane4", coordinate: position4) {
                    ZStack {
                        RoundedRectangle(cornerRadius: 10)
                            .fill(.background)
                        RoundedRectangle(cornerRadius: 10)
                            .stroke(.secondary,lineWidth: 5)
                        Image(systemName:"airplane.circle.fill")
                            .resizable()
                            .frame(width:20,height: 20)
                    }
                }.annotationTitles(.hidden)
            }
            .padding()
            .border(.green)
            .layoutPriority(1)
            .mapStyle(.hybrid(elevation: .realistic))
            
            
        }
        .padding()
        .border(.red)
        .layoutPriority(1)
    }
}

#Preview {
    ContentView()
}