//
// ExampleView.swift
// iusfq (iOS)
//
// Created by Miguel Andrade on 26/4/22.
//
import SwiftUI
struct ExampleView: View {
@State var hasScrolled = false
@Namespace var namespace
@State var show = false
@State var showStatusBar = true
@State var selectedID = UUID()
@State var showExample = false
@State var selectedIndex = 0
@EnvironmentObject var model: Model
var body: some View {
ZStack {
Color("Background").ignoresSafeArea()
ScrollView {
scrollDetection
featured
Text("Services".uppercased())
.font(.footnote.weight(.semibold))
.foregroundColor(.secondary)
.frame(maxWidth: .infinity, alignment: .leading)
.padding(.horizontal, 20)
LazyVGrid(columns: [GridItem(.adaptive(minimum: 300), spacing: 20)], spacing: 20) {
if !show {
cards
} else {
ForEach(featuredExamples) { example in
Rectangle()
.fill(.white)
.frame(height: 300)
.cornerRadius(30)
.shadow(color: Color("Shadow"), radius: 20, x: 0, y: 10)
.opacity(0.3)
.padding(.horizontal, 30)
}
}
}
.padding(.horizontal, 20)
}
.coordinateSpace(name: "scroll")
.safeAreaInset(edge: .top, content: {
Color.clear.frame(height: 70)
})
.overlay(
NavigationBar(title: "USFQ", hasScrolled: $hasScrolled)
)
if show {
detail
}
}
.statusBar(hidden: !showStatusBar)
.onChange(of: show) { newValue in
withAnimation(.closeCard) {
if newValue {
showStatusBar = false
} else {
showStatusBar = true
}
}
}
}
var scrollDetection: some View {
GeometryReader { proxy in
// Text("(proxy.frame(in: .named("scroll")).minY)")
Color.clear.preference(key: ScrollPreferenceKey.self, value: proxy.frame(in: .named("scroll")).minY)
}
.frame(height: 0)
.onPreferenceChange(ScrollPreferenceKey.self, perform: { value in
withAnimation(.easeInOut) {
if value < 0 {
hasScrolled = true
} else {
hasScrolled = false
}
}
})
}
var featured: some View {
TabView {
ForEach(Array(featuredExamples.enumerated()), id: .offset) { index, example in
GeometryReader { proxy in
let minX = proxy.frame(in: .global).minX
FeaturedExample(example: example)
.frame(maxWidth: 500)
.frame(maxWidth: .infinity)
.padding(.vertical, 40)
.rotation3DEffect(.degrees(minX / -10), axis: (x: 0, y: 1, z: 0))
.shadow(color: Color("Shadow").opacity(0.3), radius: 10, x: 0, y: 10)
.blur(radius: abs(minX / 40))
.overlay(
Image(example.image)
.resizable()
.aspectRatio(contentMode: .fit)
.frame(height: 230)
.offset(x: 32, y: -80)
.offset(x: minX / 2)
)
.onTapGesture {
showExample = true
selectedIndex = index
}
// Text("(proxy.frame(in: .global).minX)")
}
}
}
.tabViewStyle(.page(indexDisplayMode: .never))
.frame(height: 430)
.background(
Image("Blob 1")
.offset(x: 250, y: -100)
)
.sheet(isPresented: $showExample) {
CourseView(namespace: namespace, course: featuredCourses[selectedIndex], show: $showExample)
}
}
var cards: some View {
ForEach(examples) { example in
ExampleItem(namespace: namespace, example: example, show: $show)
.onTapGesture {
withAnimation(.openCard) {
show.toggle()
model.showDetail.toggle()
showStatusBar = false
selectedID = example.id
}
}
}
}
var detail: some View {
ForEach(examples) { example in
if example.id == selectedID {
ExampleView(namespace: namespace, example: example, show: $show)
.zIndex(1)
.transition(.asymmetric(
insertion: .opacity.animation(.easeInOut(duration: 0.1)),
removal: .opacity.animation(.easeInOut(duration: 0.3).delay(0.2))))
}
}
}
}
struct ServicesView_Previews: PreviewProvider {
static var previews: some View {
ExampleView()
.preferredColorScheme(.dark)
.environmentObject(Model())
}
}
