import SwiftUI
import SFSafeSymbols

private struct NavigationIcon: View {

    let symbol: SFSymbol

    let edge: Edge.Set

    var body: some View {
        SwiftUI.Image(systemSymbol: symbol)
            .resizable()
            .aspectRatio(contentMode: .fit)
            .padding(5)
            .padding(edge, 2)
            .fontWeight(.light)
            .foregroundStyle(.white)
            .frame(width: 30, height: 30)
            .background(Color.black.opacity(0.6).clipShape(Circle()))
    }
}

struct PostImageGalleryView: View {

    let images: [Image]

    @State private var currentIndex = 0

    var body: some View {
        ZStack {
            images[currentIndex]
                .resizable()
                .scaledToFit()
            if images.count > 1 {
                HStack {
                    Button(action: previous) {
                        NavigationIcon(symbol: .chevronLeft, edge: .trailing)
                    }
                    .buttonStyle(.plain)
                    .padding()

                    Spacer()
                    Button(action: next) {
                        NavigationIcon(symbol: .chevronRight, edge: .leading)
                    }
                    .buttonStyle(.plain)
                    .padding()
                }
                VStack {
                    Spacer()
                    HStack(spacing: 8) {
                        ForEach(0..<images.count, id: \.self) { index in
                            Circle()
                                .fill(index == currentIndex ? Color.white : Color.gray) // Change color based on current index
                                .frame(width: 10, height: 10)
                        }
                    }
                    .padding(.bottom, 10)
                }
            }
        }
    }

    private func previous() {
        if currentIndex > 0 {
            currentIndex -= 1
        } else {
            currentIndex = images.count - 1
        }
    }

    private func next() {
        if currentIndex < images.count - 1 {
            currentIndex += 1
        } else {
            currentIndex = 0 // Wrap to first image
        }
    }
}

#Preview(traits: .fixedLayout(width: 300, height: 300)) {
    PostImageGalleryView(images: MockImage.images.map { $0.imageToDisplay })
}