import SwiftUI

struct PostImagesView: View {

    @ObservedObject
    var post: LocalizedPost

    @State
    private var showImagePicker = false

    var body: some View {
        ScrollView(.horizontal) {
            HStack(alignment: .center, spacing: 8) {
                ForEach(post.images) { image in
                    ZStack {
                        image.imageToDisplay
                            .resizable()
                            .aspectRatio(contentMode: .fill)
                            .frame(maxWidth: 300, maxHeight: 200)
                            .cornerRadius(8)
                            .layoutPriority(1)
                        VStack {
                            HStack(alignment: .top) {
                                Button(action: { remove(image) }) {
                                    NavigationIcon(symbol: .trash, edge: .all)
                                }
                                .buttonStyle(.plain)
                                Spacer()
                                Text(image.id)
                                    .padding(4)
                                    .foregroundStyle(Color.white.opacity(0.8))
                                    .background(RoundedRectangle(cornerRadius: 8).fill(Color.black.opacity(0.7)))
                            }
                            Spacer()
                            HStack {
                                Button(action: { shiftLeft(image) }) {
                                    NavigationIcon(symbol: .chevronLeft, edge: .trailing)
                                }
                                .buttonStyle(.plain)
                                Spacer()
                                Button(action: { shiftRight(image) }) {
                                    NavigationIcon(symbol: .chevronRight, edge: .leading)
                                }
                                .buttonStyle(.plain)
                            }
                        }
                        .padding()
                    }
                }
                Button(action: { showImagePicker = true }) {
                    NavigationIcon(symbol: .plus, edge: .all)
                }
                .buttonStyle(.plain)
                .padding()
            }
        }
        .sheet(isPresented: $showImagePicker) {
            MultiFileSelectionView(selectedFiles: $post.images, allowedType: .image)
        }
    }

    private func shiftLeft(_ image: FileResource) {
        guard let index = post.images.firstIndex(of: image) else {
            return
        }
        guard index > 0 else {
            return
        }
        post.images.swapAt(index, index - 1)
    }

    private func shiftRight(_ image: FileResource) {
        guard let index = post.images.firstIndex(of: image) else {
            return
        }
        guard index < post.images.count - 1 else {
            return
        }
        post.images.swapAt(index, index + 1)
    }

    private func remove(_ image: FileResource) {
        guard let index = post.images.firstIndex(of: image) else {
            return
        }
        post.images.remove(at: index)
    }
}

#Preview {
    VStack(alignment: .leading) {
        Text("Images")
            .font(.headline)
        PostImagesView(post: .english)
    }
}