import SwiftUI

struct ViewHome: View {
    @State private var showPopup: Bool = false
    @State private var fullscreenImageIndex: Int? = nil
    
    let images = [
        "app1", "app2", "app3", "app4", "app5"
    ]
    
    let imageTexts = [
        "1. Idéudvikling\nStart med at finde på idéer, problemer, og emner, som kunne være spændende at lave apps om. Brug Crazy 8-metoden, hvor du får et Keynote-dokument med 8 felter (kan også gøres på papir opdelt i 8 felter), hvor du skal tegne og skrive idéer (1 idé per minut).",
        "2. Tegn\nNår du har valgt din idé fra Crazy 8, skal du begynde at tegne, hvordan appen kunne se ud. Dette gøres i tegnefunktionen i appen, hvor du kan skitsere dine idéer til indhold og layout. Du skal have tegnet mindst 5 app-sider, før du går videre til næste aktivitet.",
        "3. Mindmap i Freeform\nBeskriv derefter, hvad der skal være med i din app, hvordan den skal se ud, og hvorfor det skal være med, baseret på dine skitser fra Tegn. Saml dette arbejde i et whiteboard-dokument. Vi har lavet en skabelon til dig, hvor du selv kan bygge de forskellige sider.",
        "4. Prototype i Keynote\nNu skal du lave en prototype af, hvordan din færdige app skal se ud. Byg prototypen i en app-skabelon i Keynote, hvor du har mulighed for at indsætte billeder, videoer, tekst, figurer og link-knapper for at skifte sider.",
        "5. App i Swift\nTil sidst skal du lære at kode en app i Swift. Her finder du en række koder og ressourcer, der kan hjælpe dig med at lave dit eget app-projekt. Her har du mulighed for at integrere koderne i dit eget projekt og ændre indholdet, så det passer til emnet i din app."
    ]
    
    var body: some View {
        ZStack {
            LinearGradient(
                gradient: Gradient(colors: [
                    Color(red: 217 / 255, green: 201 / 255, blue: 254 / 255),
                    Color(red: 86 / 255, green: 193 / 255, blue: 255 / 255)
                ]),
                startPoint: .leading,
                endPoint: .trailing
            )
            .edgesIgnoringSafeArea(.all)
            
            GeometryReader { geometry in
                
                let imageSize = geometry.size.width / 10.65
                
                VStack(alignment: .center, spacing: 30) {
                    Text("An App About Apps")
                        .font(.system(size: 50, weight: .bold))
                        .foregroundColor(Color(red: 255 / 255, green: 150 / 255, blue: 141 / 255))
                        .padding(.top, 60)
                        .frame(maxWidth: 600)
                    
                    Image("LOGO")
                        .resizable()
                        .aspectRatio(2.4/1, contentMode: .fit)
                        .padding(.horizontal, imageSize)
                        .foregroundColor(Color(red: 1, green: 0.5, blue: 0))
                        .frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .center)
                        .padding(-30)
                    
                    
                    Text("Fra dine første idéer til at skitsere og beskrive dem, prototype din app, lære at kode en rigtig Swift-app, og til sidst udgive den på App Store. Gør din vision til virkelighed!")
                        .font(.system(size: 20, weight: .regular)) 
                        .foregroundColor(Color(red: 1, green: 0.5, blue: 0)) 
                        .frame(maxWidth: 600)
                        .multilineTextAlignment(.center)
                    
                    
                    
                    
                }
                .padding(.bottom, 100)
                
                Spacer()
                
                    .padding()
                
                VStack {
                    Spacer()
                    
                    HStack {
                        Spacer()
                        
                        Button(action: {
                            showPopup.toggle()
                        }) {
                            Image(systemName: "info.circle")
                                .font(.largeTitle)
                                .padding()
                                .foregroundColor(.black)
                                .clipShape(Circle())
                        }
                        .padding(.trailing, 20)
                        .padding(.bottom, 20)
                    }
                }
                
                if showPopup {
                    PopupView2(showPopup: $showPopup, images: images, imageTexts: imageTexts, fullscreenImageIndex: $fullscreenImageIndex)
                        .transition(.scale)
                        .zIndex(1)
                }
                
                if let index = fullscreenImageIndex {
                    FullScreenImageView(images: images, imageTexts: imageTexts, currentIndex: index, fullscreenImageIndex: $fullscreenImageIndex)
                        .zIndex(2)
                }
            }
        }
    }
}
struct PopupView2: View {
    @Binding var showPopup: Bool
    let images: [String]
    let imageTexts: [String]
    @State private var currentPage: Int = 0
    @Binding var fullscreenImageIndex: Int?
    
    var body: some View {
        VStack(spacing: 20) {
            Text("Hvad er an app about apps?")
                .font(.headline)
                .padding()
            
            TabView(selection: $currentPage) {
                ForEach(0..<images.count, id: \.self) { index in
                    VStack {
                        Image(images[index])
                            .resizable()
                            .aspectRatio(contentMode: .fit)
                            .frame(width: 400, height: 300)
                            .onTapGesture {
                                fullscreenImageIndex = index
                            }
                        
                        Text(imageTexts[index])
                            .font(.body)
                            .multilineTextAlignment(.center)
                            .padding()
                            .background(Color.white)
                            .cornerRadius(10)
                            .foregroundColor(.black)
                            .frame(maxWidth: .infinity)
                    }
                    .tag(index)
                }
            }
            .tabViewStyle(PageTabViewStyle())
            .frame(width: 600, height: 400)
            
            Text("\(currentPage + 1) of \(images.count)")
                .font(.footnote)
                .padding(-10)
            
            Button(action: {
                showPopup = false
            }) {
                Image(systemName: "xmark.circle")
                    .font(.title2)
                    .padding()
                    .foregroundColor(.black)
                    .cornerRadius(10)
            }
        }
        .frame(width: 600, height: 600)
        .background(Color.white)
        .cornerRadius(20)
        .shadow(radius: 20)
        .padding()
    }
}
struct FullScreenImageView: View {
    let images: [String]
    let imageTexts: [String]
    @State var currentIndex: Int
    @Binding var fullscreenImageIndex: Int?
    
    var body: some View {
        ZStack {
            Color.black.ignoresSafeArea()
            
            VStack {
                Spacer()
                
                TabView(selection: $currentIndex) {
                    ForEach(0..<images.count, id: \.self) { index in
                        Image(images[index])
                            .resizable()
                            .scaledToFit()
                            .frame(maxWidth: .infinity, maxHeight: .infinity)
                            .onTapGesture {
                                fullscreenImageIndex = nil
                            }
                            .padding()
                            .tag(index)
                    }
                }
                .tabViewStyle(PageTabViewStyle())
                .indexViewStyle(PageIndexViewStyle())
                
                Text(imageTexts[currentIndex])
                    .padding()
                    .background(
                        RoundedRectangle(cornerRadius: 10)
                            .fill(Color.white)
                            .overlay(
                                RoundedRectangle(cornerRadius: 10)
                                    .stroke(Color.black, lineWidth: 1)
                            )
                    )
                    .padding()
                    .foregroundColor(.black)
                    .multilineTextAlignment(.center)
                
                Text("\(currentIndex + 1) of \(images.count)")
                    .font(.footnote)
                    .padding(.bottom, 10)
                
                Spacer()
            }
        }
    }
}

struct ViewHome_Previews: PreviewProvider {
    static var previews: some View {
        ViewHome()
    }
}

