//
//  OnboardingView.swift
//  City Sights App
//
//  Created by Milos Ilic on 18.1.23..
//

import SwiftUI

struct OnboardingView: View {
    
    @EnvironmentObject var model: ContentModel
    @State private var tabSelection = 0
    
    private let blue = Color(red: 16/255, green: 194/255, blue: 226/255)
    private let turquoise = Color(red: 15/255, green: 206/255, blue: 177/255)
    
    var body: some View {
        
        VStack {
            
            // Tab view
            TabView(selection: $tabSelection) {
                
                // First tab
                VStack(spacing: 20) {
                    Image("city")
                        .resizable()
                        .scaledToFit()
                    Text("Welcome to City Sights!")
                        .bold()
                        .font(.title)
                        
                    Text("City Sights helps you find the best of the city!")
        
                }
                .multilineTextAlignment(.center)
                .padding()
                .foregroundColor(.white)
                .tag(0)
                
                // Second tab
                VStack(spacing: 20) {
                    Image("userloc1")
                        .resizable()
                        .scaledToFit()
                    Text("Ready to discover your city?")
                        .bold()
                        .font(.title)
                    Text("We'll show you the best restaurants, venues and more, based on your location!")
                        
                }
                .multilineTextAlignment(.center)
                .padding()
                .foregroundColor(.white)
                .tag(1)
                
            }
            .tabViewStyle(PageTabViewStyle(indexDisplayMode: .always))
            
            
            // Button
            Button {
                
                // Detect which tab it is
                if tabSelection == 0 {
                    tabSelection = 1
                }
                else {
                    // Request for geolocation permission
                    model.requestGeoLocationPermission()
                }
                
            } label: {
                
                ZStack {
                    
                    Rectangle()
                        .foregroundColor(.white)
                        .frame(height: 48)
                        .cornerRadius(10)
                    
                    Text(tabSelection == 0 ? "Next" : "Get My Location")
                        .bold()
                        .padding()
                    
                }
                
            }
            .accentColor(tabSelection == 0 ? blue : turquoise)
            .padding()

        }

        .background(tabSelection == 0 ? blue : turquoise)
        .ignoresSafeArea(.all, edges: .all)
        
    }
}

struct OnboardingView_Previews: PreviewProvider {
    static var previews: some View {
        OnboardingView()
    }
}