import SwiftUI
import SFSafeSymbols

struct ImagesView: View {

    @EnvironmentObject
    var content: Content

    let maximumItemWidth: CGFloat = 300

    let aspectRatio: CGFloat = 1.5

    let spacing: CGFloat = 20

    @State
    private var selectedImage: ImageResource?

    @State
    private var showImageDetails = false

    var body: some View {
        FlexibleColumnView(items: $content.images) { image, width in
            let isSelected = selectedImage == image
            let borderColor: Color = isSelected ? .accentColor : .clear
            return image.imageToDisplay
                .resizable()
                .aspectRatio(contentMode: .fit)
                .border(borderColor, width: 5)
                .frame(width: width)
                .onTapGesture { didTap(image: image) }
        }
        .inspector(isPresented: $showImageDetails) {
            if let selectedImage {
                ImageDetailsView(image: selectedImage)
            } else {
                Text("Select an image to show its details")
            }
        }
        .toolbar {
            ToolbarItem(placement: .primaryAction) {
                Button(action: { showImageDetails.toggle() }) {
                    Label("Details", systemSymbol: .infoCircle)
                }
            }
        }
    }

    private func didTap(image: ImageResource) {
        if selectedImage == image {
            selectedImage = nil
        } else {
            selectedImage = image
        }
    }
}

#Preview {
    let content = Content()
    content.images = MockImage.images
    return ImagesView()
        .environmentObject(content)
}