import SwiftUI

// Creates effect of blurring of content below view that has this style applied to it
struct BlurView: UIViewRepresentable {
    var style: UIBlurEffect.Style = .systemMaterial
    func makeUIView(context: Context) -> UIVisualEffectView {
        return UIVisualEffectView(effect: UIBlurEffect(style: style))
    }
    func updateUIView(_ uiView: UIVisualEffectView, context: Context) {
        uiView.effect = UIBlurEffect(style: style)
    }
}

struct SignupView: View {
    @State var shown = false
    
    private let animation = Animation.easeInOut(duration: 1)
        .repeatForever(autoreverses: true)
    
    var body: some View {
        VStack {
            Spacer().frame(height: 50)
            
            // Welcome text.
            Text("ウエルカム")
                .fontWeight(.medium)
                .font(.system(size: 24))
                .foregroundColor(Color("SignupPrimary"))
                .frame(maxWidth: 30, maxHeight: .infinity)

            ZStack(alignment: .top) {
                
                Circle()
                    .fill(Color("SignupSecondary"))
                    .frame(width: 180, height: 180)
                    .offset(y: shown ? 10 : 0)
                    .animation(animation)
                
                VStack(alignment: .center) {
                    Button(action: {}) {
                        // Sign Up text.
                        Text("サイノアップ")
                            .fontWeight(.medium)
                            .foregroundColor(.white)
                    }.padding(.horizontal, 40)
                    .padding(.vertical, 15)
                    .background(Color("SignupPrimary"))
                    .cornerRadius(100)
                    
                    Spacer().frame(height: 20)
                    
                    Button(action: {}) {
                        // Sign In text.
                        Text("サイノイノ")
                            .font(.system(size: 16))
                            .foregroundColor(Color("SignupPrimary"))
                    }
                    
                }
                .frame(maxWidth: .infinity, maxHeight: .infinity)
                .background(BlurView(style: .systemUltraThinMaterial))
                .offset(y: 90)
                
            }.frame(height: 450, alignment: .topLeading)

        }
        .frame(maxHeight: .infinity).edgesIgnoringSafeArea(.all)
        .onAppear {
            self.shown.toggle()
        }
        
    }
}