//
//  SQImagePicker.swift
//  AlloVoisinsSwiftUI
//
//  Created by Victor on 27/11/2024.
//

import SwiftUI

struct SQImagePicker: View {
    let nbOfImages: Int = 4
    var images: [Image] = []

    private let itemSpacing: CGFloat = 8
    private var columns: [GridItem] {
        [
            GridItem(.fixed(160), spacing: itemSpacing),
            GridItem(.fixed(160), spacing: itemSpacing)
        ]
    }

    var body: some View {
        VStack(alignment: .leading) {
            SQText("Images")
                .sqFont(.semiBold)

            LazyVGrid(columns: columns, alignment: .leading) {
                ForEach(0 ..< nbOfImages) { _ in
                    SQImagePickerView()
                }
            }
        }
    }
}

struct SQImagePickerView: View {
    var image: Image?
    @State var showSelection: Bool = false

    var body: some View {
        VStack {
            if let image = image {
                image
                    .frame(width: 160, height: 160)
                    .background(
                        RoundedRectangle(cornerRadius: 8)
                            .fill(Color.sqNeutral(10)))
            } else {
                HStack {
                    SQIcon(.camera, size: .xl)
                }
                .frame(width: 160, height: 160)
                .background(
                    RoundedRectangle(cornerRadius: 8)
                        .fill(Color.sqNeutral(10)))
            }
        }
        .onTapGesture {
            showSelection = true
        }
        .sheet(isPresented: $showSelection) {
            SQImagePickerSelectorSheet()
        }
    }
}

struct SQImagePickerSelectorSheet: View {
    @Environment(\.dismiss) var dismiss

    var categoriesImages: [CategoriesImages] = [
        CategoriesImages(name: "Entretien - Réparation autres véhicules", pictures: [
            "square.and.arrow.up.fill",
            "paperplane.circle.fill",
            "tray.fill"
        ]),
        CategoriesImages(name: "Plomberie - Installation sanitaire", pictures: [
            "xmark.bin.circle.fill"
        ]),
        CategoriesImages(name: "Carrelage", pictures: [
            "document.on.document",
            "richtext.page.fill.he"
        ])
    ]

    private let itemSpacing: CGFloat = 8
    private var columns: [GridItem] {
        [
            GridItem(.fixed(160), spacing: itemSpacing),
            GridItem(.fixed(160), spacing: itemSpacing)
        ]
    }

    var body: some View {
        VStack(spacing: 0) {
            HStack {
                Button {
                    dismiss()
                } label: {
                    SQIcon(.xmark, size: .l)
                }

                SQText("Sélectionner une photo")
                    .sqSize(19)
                    .sqFont(.bold)
                    .frame(maxWidth: .infinity)
                Spacer()
            }
            .padding()
            ScrollView {
                ForEach(categoriesImages, id: \.name) { category in
                    VStack {
                        VStack(alignment: .leading) {
                            SQText(category.name)
                            LazyVGrid(columns: columns, alignment: .leading) {
                                ForEach(category.pictures, id: \.self) { picture in
                                    Image(systemName: picture)
                                        .frame(width: 160, height: 120)
                                        .background(
                                            RoundedRectangle(cornerRadius: 8)
                                                .fill(Color.sqNeutral(10)))
                                }
                            }
                        }
                        .padding()

                        Rectangle()
                            .frame(height: 16)
                            .foregroundColor(Color.sqNeutral(10))
                    }
                }
            }
        }
    }
}

#Preview {
    SQImagePicker()
        .padding()
}

struct CategoriesImages {
    var name: String
    var pictures: [String]
}
