Widgets

//
//  ContentView.swift
//  Widgets
//
//  Created by Kyle Halevi on 7/3/20.
//

import SwiftUI

struct Widget: View {
    
    @State var flipped = false
    @State var title = "Weather"
    @State var subtitle = "Forecast"
    @State var icon = Image("Icon")
    
    var detail: some View {
        ZStack {
            
            VStack(alignment: .leading) {
                Text("Cupertino")
                    .font(Font.body.weight(.semibold))
                Text("68º")
                    .font(Font.system(size: 45).weight(.thin))
                    .padding(.bottom, -15)
                Image(systemName: "sun.max.fill")
                    .foregroundColor(.yellow)
                Text("Sunny")
                HStack {
                    Text("H 76º")
                    Text("L 55º")
                }
            }
            .frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .topLeading)
            .padding(.all, 15)
            .foregroundColor(.white)
            .font(Font.body.weight(.medium))
            
            ZStack(alignment: .bottomTrailing, content: {
                Button(action: {
                    self.flipped.toggle()
                }) {
                    Image(systemName: "info.circle")
                }
                .foregroundColor(.white)
                .scaleEffect(CGSize(width: 1.0, height: 1.0), anchor: .topTrailing)
            })
            .frame(width: 160, height: 160, alignment: .bottomTrailing)
            .rotation3DEffect(self.flipped ? Angle(degrees: 180) : Angle(degrees: 0), axis: (x: CGFloat(0), y: CGFloat(10), z: CGFloat(0)))
        }
        .frame(width: self.flipped ? 340 : 180, height: self.flipped ? 220 : 180)
        .background(LinearGradient(gradient: Gradient(colors: [Color("Weather Top"), Color("Weather Bottom")]), startPoint: .top, endPoint: .bottom))
        .clipShape(RoundedRectangle(cornerRadius: 20, style: .continuous))
        .contextMenu(ContextMenu(menuItems: {
            Button(action: {
                self.flipped.toggle()
            }) {
                HStack {
                    Text("Edit Widget")
                    Image(systemName: "info.circle")
                }
            }
            Spacer()
            
            Button(action: {
                print("Edit Home Screen")
            }) {
                HStack {
                    Text("Edit Home Screen")
                    Image(systemName: "apps.iphone")
                }
            }
            
            Button(action: {
                print("Remove Widget")
            }) {
                HStack {
                    Text("Remove Widget")
                    Image(systemName: "minus.circle")
                }
                .foregroundColor(.red)
            }
        }))
        .shadow(color: Color.black.opacity(0.5), radius: 20, x: 0, y: 10)
    }
    
    var settings: some View {
        ZStack {
            VStack {
                ZStack {
                    Rectangle().frame(width: 340, height: 50, alignment: .top)
                        .foregroundColor(Color("Settings").opacity(0.7))
                    
                    HStack {
                        icon.resizable(capInsets: EdgeInsets(), resizingMode: .stretch)
                            .scaledToFit()
                            .frame(width: 30, height: 30, alignment: .topLeading)
                            .clipShape(RoundedRectangle(cornerRadius: 8.0, style: .continuous))
                            .padding(.top, 8)
                            .padding(.leading, 15)
                        
                        VStack(alignment: .leading) {
                            Text(subtitle)
                                .foregroundColor(.white)
                                .font(Font.system(size: 17).weight(.semibold))
                            Text(title)
                                .foregroundColor(Color("Settings Text"))
                                .font(Font.system(size: 13).weight(.regular))
                        }
                        .padding(.top, 8)
                        
                        Spacer()
                        
                        Button(action: {
                            self.flipped.toggle()
                        }) {
                            Image(systemName: "xmark.circle.fill")
                                .font(Font.title.weight(.regular))
                                .background(Color("Settings Text").clipShape(Circle()))
                        }
                        .foregroundColor(Color("Close"))
                        .padding(.top, 8)
                        .padding(.trailing, 4)
                        .scaleEffect(CGSize(width: 1.0, height: 1.0), anchor: .topTrailing)
                    }
                    .padding(.top, 9)
                    .padding(.trailing, 15)
                }
                
                Spacer()
                
                ScrollView {
                    Text("See the current weather conditions and forecast for a location.")
                        .foregroundColor(Color("Settings Text"))
                        .font(Font.system(size: 13).weight(.regular))
                        .frame(maxWidth: .infinity, alignment: .leading)
                        .padding(.horizontal, 20)
                        .padding(.top, 5)
                    
                    ZStack {
                        RoundedRectangle(cornerRadius: 10.0, style: .continuous)
                            .foregroundColor(Color("Cell"))
                        
                        HStack {
                            Text("Location")
                                .font(Font.body.weight(.medium))
                                .padding(.leading, 15)
                            
                            Spacer()
                            
                            Text("Current Location")
                            Image(systemName: "location.fill")
                                .scaleEffect(0.9, anchor: .center)
                                .padding(.trailing, 15)
                        }
                        .foregroundColor(.white)
                    }
                    .padding(.horizontal, 19)
                    .padding(.vertical, 5)
                    .frame(height: 60)
                    
                    Spacer()
                    
                    Text("Data Provided by the Weather Channel")
                        .foregroundColor(Color("Settings Text").opacity(0.4))
                        .font(Font.system(size: 13))
                        .padding(.top, 18)
                }
            }
            
        }
        .frame(width: self.flipped ? 340 : 180, height: self.flipped ? 220 : 180)
        .background(LinearGradient(gradient: Gradient(colors: [Color("Settings")]), startPoint: .top, endPoint: .bottom))
        .clipShape(RoundedRectangle(cornerRadius: 20, style: .continuous))
        .shadow(color: Color.black.opacity(0.5), radius: 20, x: 0, y: 10)
        .rotation3DEffect(Angle(degrees: -180), axis: (x: 0, y: 1, z: 0))
    }
    
    var body: some View {
        VStack {
            ZStack {
                settings
                    .opacity(self.flipped ? 1 : 0)
                detail
                    .opacity(self.flipped ? 0 : 1)
            }
            .padding(.bottom, 0)
            .rotation3DEffect(Angle(degrees: self.flipped ? -180 : 0), axis: (x: 0, y: 1, z: 0))
            .animation(.interpolatingSpring(stiffness: 190.0, damping: 130.0))
            
            Text(title)
                .foregroundColor(.white)
                .font(Font.system(size: 13).weight(.semibold))
                .opacity(self.flipped ? 0 : 1)
                .animation(.easeInOut)
        }
        .padding(.all, 5)
    }
}

struct ContentView: View {
    var body: some View {
        
        ZStack {
            Image("Wallpaper")
                .resizable()
                .aspectRatio(contentMode: .fill)
                .edgesIgnoringSafeArea(.all)
                
            ScrollView {
                Spacer()
                VStack {
                    Widget()
                    Widget()
                    Widget()
                    Widget()
                    Widget()
                    Widget()
                    Widget()
                }
                .frame(maxWidth: .infinity)
            }
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}