//
//  TankEditor.swift
//  GasTankAR
//
//  Created by Dennis Nemec on 25.08.26.
//

import SwiftUI

/// Wiederverwendbare Auswahl für die Tank-Eigenschaften (Größe, Farbe,
/// Aufstellungsart und halbtransparente Darstellung).
struct TankEditor: View {
    @Binding var tank: Tank

    var body: some View {
        Picker("Größe", selection: $tank.size) {
            ForEach(TankSize.allCases) { size in
                Text(size.displayName).tag(size)
            }
        }

        Picker("Farbe", selection: $tank.color) {
            ForEach(TankColor.allCases) { color in
                Text(color.displayName).tag(color)
            }
        }

        VStack(alignment: .leading, spacing: 8) {
            Text("Aufstellungsart")

            HStack(spacing: 12) {
                ForEach(TankPlacement.allCases) { placement in
                    PlacementOption(
                        placement: placement,
                        isSelected: tank.placement == placement
                    ) {
                        tank.placement = placement
                    }
                }
            }
        }
        .padding(.vertical, 4)

        Toggle("Halbtransparent (nur Deckel)", isOn: $tank.showLidOnly)
            .disabled(tank.placement != .belowGround)
            .onChange(of: tank.placement) { _, newPlacement in
                // Option nur für unterirdische Tanks sinnvoll – sonst zurücksetzen.
                if newPlacement != .belowGround {
                    tank.showLidOnly = false
                }
            }
    }
}

/// Auswahlkachel für eine Aufstellungsart mit Icon und umrahmter Auswahl.
private struct PlacementOption: View {
    let placement: TankPlacement
    let isSelected: Bool
    let action: () -> Void

    var body: some View {
        Button(action: action) {
            VStack(spacing: 8) {
                Image(placement.imageName)
                    .renderingMode(.template)
                    .resizable()
                    .scaledToFit()
                    .foregroundStyle(Color.accentColor)
                    .frame(height: 72)
                    .scaleEffect(1.25)
                    .padding(8)

                Text(placement.displayName)
                    .font(.caption)
                    .foregroundStyle(isSelected ? .primary : .secondary)
            }
            .frame(maxWidth: .infinity)
            .padding(8)
            .background(
                (isSelected ? Color.accentColor.opacity(0.12) : Color.clear),
                in: .rect(cornerRadius: 12)
            )
            .overlay {
                RoundedRectangle(cornerRadius: 12)
                    .stroke(
                        isSelected ? Color.accentColor : Color.secondary.opacity(0.4),
                        lineWidth: isSelected ? 2 : 1
                    )
            }
        }
        .buttonStyle(.plain)
    }
}

#Preview {
    @Previewable @State var tank = Tank()
    return Form {
        Section("Tankauswahl") {
            TankEditor(tank: $tank)
        }
    }
}