//
//  SystemEditorView.swift
//  Cable
//
//  Created by Stefan Lange-Hegermann on 16.09.25.
//

import SwiftUI

struct SystemEditorView: View {
    @Binding var systemName: String
    @Binding var location: String
    @Binding var iconName: String
    @Binding var colorName: String
    
    @State private var tempLocation: String
    
    private let systemIcons = [
        "building.2", "house", "building", "tent", "sailboat",
        "airplane", "ferry", "bus", "truck.box",
        "server.rack", "externaldrive", "cpu", "gear", "wrench.adjustable", "hammer",
        "lightbulb", "bolt", "powerplug", "battery.100","sun.max",
        "engine.combustion", "fuelpump", "drop", "flame", "snowflake", "thermometer"
    ]
    
    init(systemName: Binding<String>, location: Binding<String>, iconName: Binding<String>, colorName: Binding<String>) {
        self._systemName = systemName
        self._location = location
        self._iconName = iconName
        self._colorName = colorName
        self._tempLocation = State(initialValue: location.wrappedValue)
    }
    
    var body: some View {
        ItemEditorView(
            title: "Edit System",
            nameFieldLabel: "System name",
            previewSubtitle: tempLocation.isEmpty ? "Location (optional)" : tempLocation,
            icons: systemIcons,
            name: $systemName,
            iconName: $iconName,
            colorName: $colorName,
            additionalFields: {
                AnyView(
                    TextField("Location (optional)", text: $tempLocation)
                        .autocapitalization(.words)
                        .onChange(of: tempLocation) { _, newValue in
                            location = newValue
                        }
                )
            }
        )
        .onAppear {
            tempLocation = location
        }
    }
}

#Preview {
    @State var name = "My System"
    @State var location = "Main Building"
    @State var icon = "building.2"
    @State var color = "blue"
    
    return SystemEditorView(systemName: $name, location: $location, iconName: $icon, colorName: $color)
}
